// Sikh Yatra section — sacred sites, packages, route, visa & calendar info
// Designed using research from the Kartarpur Corridor (visa-free, $20 service charge),
// Bilateral Protocol on Visits to Religious Shrines 1974, and ETPB-managed gurdwaras.

const SACRED_SITES = [
  {
    code: "01",
    title: "Gurdwara Janam Asthan",
    city: "Nankana Sahib",
    desc: "The birthplace of Guru Nanak Dev Ji and the holiest gurdwara in Pakistan. Centre of every yatra.",
    img: IMG.nankana,
  },
  {
    code: "02",
    title: "Gurdwara Darbar Sahib",
    city: "Kartarpur · Narowal",
    desc: "Where Guru Nanak Dev Ji spent the final 18 years of his life. Accessible visa-free via the Kartarpur Corridor.",
    img: IMG.kartarpur,
  },
  {
    code: "03",
    title: "Gurdwara Panja Sahib",
    city: "Hassan Abdal",
    desc: "Believed to bear the handprint of Guru Nanak Dev Ji preserved in stone. Centre of Baisakhi celebrations.",
    img: IMG.panja,
  },
  {
    code: "04",
    title: "Gurdwara Dera Sahib",
    city: "Lahore",
    desc: "Commemorates the martyrdom of Guru Arjan Dev Ji in 1606. Adjacent to the Samadhi of Maharaja Ranjit Singh.",
    img: IMG.derasahib,
  },
  {
    code: "05",
    title: "Gurdwara Rori Sahib",
    city: "Eminabad · Gujranwala",
    desc: "Marks Guru Nanak Dev Ji's visit and stay during the Mughal era. Paired with Gurdwara Chakki Sahib nearby.",
    img: IMG.rorisahib,
  },
  {
    code: "06",
    title: "Gurdwara Sacha Sauda",
    city: "Farooqabad · Sheikhupura",
    desc: "Where Guru Nanak Dev Ji's teaching on selfless charity was first lived — the 'true bargain'.",
    img: IMG.sachasauda,
  },
];

const YATRA_PACKAGES = [
  {
    code: "DC",
    name: "Kartarpur Corridor",
    dur: "Same day · Visa-free",
    from: "Wagah / Dera Baba Nanak",
    bullets: [
      "Dawn-to-dusk visa-free access for Indian Sikh pilgrims",
      "USD 20 service charge per pilgrim (Govt. of Pakistan)",
      "Coordination of the 4.5 km corridor crossing",
      "Lunch at Darbar Sahib langar · return same day",
    ],
    price: "USD 35",
    note: "Per pilgrim · excl. $20 corridor service charge",
    primary: false,
  },
  {
    code: "DS",
    name: "Darshan Circuit",
    dur: "3 Days · 2 Nights",
    from: "Lahore",
    bullets: [
      "Dera Sahib & Maharaja Ranjit Singh Samadhi, Lahore",
      "Day visit to Gurdwara Janam Asthan, Nankana Sahib",
      "Gurdwara Sacha Sauda, Farooqabad",
      "4★ hotel near Walled City · breakfast + dinner",
    ],
    price: "USD 295",
    note: "Per pilgrim · twin sharing · min. group 6",
    primary: true,
  },
  {
    code: "CY",
    name: "Complete Yatra",
    dur: "8 Days · 7 Nights",
    from: "Lahore → Islamabad",
    bullets: [
      "All six principal gurdwaras + Maharaja Samadhi",
      "Lahore · Kartarpur · Eminabad · Nankana · Hassan Abdal · Islamabad",
      "Senior yatra coordinator with deep gurdwara liaison",
      "Heritage walk of Lahore Walled City & Wagah ceremony",
    ],
    price: "USD 895",
    note: "Per pilgrim · twin sharing · 4★ hotels",
    primary: false,
  },
];

const ITINERARY = [
  { day: "01", city: "LHE", title: "Arrival & Lahore",       note: "Airport pickup. Gurdwara Dera Sahib + Samadhi of Maharaja Ranjit Singh. Welcome dinner." },
  { day: "02", city: "LHE", title: "Walled City heritage",   note: "Lahore Fort, Badshahi Mosque, Wazir Khan. Evening Wagah border flag-lowering ceremony." },
  { day: "03", city: "KTP", title: "Kartarpur Sahib",         note: "Day pilgrimage to Gurdwara Darbar Sahib Kartarpur. Langar, kirtan and the sarovar grounds." },
  { day: "04", city: "EMI", title: "Eminabad & Sacha Sauda",  note: "Gurdwara Rori Sahib & Chakki Sahib. Drive to Farooqabad for Sacha Sauda darshan." },
  { day: "05", city: "NKS", title: "Nankana Sahib",           note: "Birthplace of Guru Nanak Dev Ji — Janam Asthan, Patti Sahib, Bal Lila, Bebe Nanki." },
  { day: "06", city: "HSB", title: "Panja Sahib · Hassan Abdal", note: "The sacred handprint shrine. Visit to Wali Kandhari Shrine on the hill." },
  { day: "07", city: "ISB", title: "Islamabad & Rawalpindi",  note: "Faisal Mosque, Pakistan Monument, optional onward via Wagah border or Lahore." },
  { day: "08", city: "LHE", title: "Departure",                note: "Transfer to Lahore / Islamabad airport. End of services." },
];

const SikhYatra = ({ onPlan }) => (
  <section id="sikh" className="sikh-section">
    {/* HEADER */}
    <div className="container">
      <Reveal as="div" {...{ className: 'sikh-head' }}>
        <span className="ticket-chip" style={{ background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.18)', color: 'rgba(255,255,255,0.85)' }}>
          <span className="dot" style={{ background: '#E4A93C' }} />Pilgrimage · Bilateral Protocol on Visits to Religious Shrines, 1974
        </span>
        <h2 className="sikh-h2">
          Sikh Yatra — walking<br/>in the footsteps of <em>Guru Nanak Dev Ji</em>.
        </h2>
        <p className="sikh-lede">
          Pakistan is home to the most sacred sites of Sikhism — the birthplace at Nankana Sahib, the final resting place at Kartarpur, and the handprint shrine at Panja Sahib. As a Pakistan registered tour operator, we coordinate yatra packages for pilgrims travelling from India via the Kartarpur Corridor and Wagah, as well as for the worldwide Sikh diaspora with Visa-on-Arrival from the UK, US, Canada and 120+ countries.
        </p>
      </Reveal>
    </div>

    {/* SACRED SITES */}
    <div className="container" style={{ marginTop: 64 }}>
      <Reveal as="div" {...{ className: 'sikh-subhead' }}>
        <div className="ticket-rule" style={{ color: 'rgba(255,255,255,0.6)' }}>The six principal gurdwaras</div>
      </Reveal>
      <div className="sikh-sites">
        {SACRED_SITES.map((s, i) => (
          <Reveal as="article" key={s.code} {...{ className: 'sikh-site' }} delay={(i%3)*80}>
            <div className="sikh-site-img">
              {/* Dignified fallback layer — visible whenever the photo doesn't load */}
              <div className="sikh-site-fallback" aria-hidden="true">
                <svg className="sikh-dome" viewBox="0 0 240 160" preserveAspectRatio="xMidYMid meet">
                  <defs>
                    <linearGradient id={`g${s.code}`} x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#F0C26C" stopOpacity="0.55"/>
                      <stop offset="100%" stopColor="#F0C26C" stopOpacity="0.10"/>
                    </linearGradient>
                  </defs>
                  {/* Central dome */}
                  <path d="M 90 110 Q 90 50 120 50 Q 150 50 150 110 Z" fill={`url(#g${s.code})`} stroke="#F0C26C" strokeWidth="0.8" strokeOpacity="0.5"/>
                  <line x1="120" y1="50" x2="120" y2="38" stroke="#F0C26C" strokeWidth="0.8" strokeOpacity="0.6"/>
                  <circle cx="120" cy="36" r="2.5" fill="#F0C26C" fillOpacity="0.6"/>
                  {/* Flanking domes */}
                  <path d="M 56 115 Q 56 78 76 78 Q 96 78 96 115 Z" fill="none" stroke="#F0C26C" strokeWidth="0.7" strokeOpacity="0.35"/>
                  <path d="M 144 115 Q 144 78 164 78 Q 184 78 184 115 Z" fill="none" stroke="#F0C26C" strokeWidth="0.7" strokeOpacity="0.35"/>
                  {/* Base */}
                  <line x1="30" y1="115" x2="210" y2="115" stroke="#F0C26C" strokeWidth="0.7" strokeOpacity="0.4"/>
                  {/* Arched openings */}
                  <path d="M 100 115 Q 100 102 110 102 Q 120 102 120 115" fill="none" stroke="#F0C26C" strokeWidth="0.5" strokeOpacity="0.3"/>
                  <path d="M 120 115 Q 120 102 130 102 Q 140 102 140 115" fill="none" stroke="#F0C26C" strokeWidth="0.5" strokeOpacity="0.3"/>
                </svg>
                <div className="sikh-fb-name">{s.title}</div>
                <div className="sikh-fb-city">{s.city}</div>
              </div>
              <img
                src={s.img}
                alt={s.title}
                className="sikh-site-photo"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
                loading="lazy"
              />
              <span className="sikh-site-code">№ {s.code}</span>
            </div>
            <div className="sikh-site-body">
              <div className="sikh-site-city">{s.city}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>

    {/* PACKAGES */}
    <div className="container" style={{ marginTop: 96 }}>
      <Reveal as="div" {...{ className: 'sikh-subhead' }}>
        <div className="ticket-rule" style={{ color: 'rgba(255,255,255,0.6)' }}>Yatra packages · USD pricing for international pilgrims</div>
      </Reveal>
      <div className="sikh-pkgs">
        {YATRA_PACKAGES.map((p) => (
          <Reveal as="article" key={p.code} {...{ className: `sikh-pkg ${p.primary ? 'is-primary' : ''}` }}>
            {p.primary && <span className="sikh-pkg-badge">Most booked</span>}
            <div className="sikh-pkg-top">
              <div className="sikh-pkg-route">
                <span className="sikh-pkg-code">{p.code}</span>
                <div>
                  <div className="sikh-pkg-from">From · {p.from}</div>
                  <h3>{p.name}</h3>
                  <div className="sikh-pkg-dur">{p.dur}</div>
                </div>
              </div>
            </div>
            <ul className="sikh-pkg-list">
              {p.bullets.map((b) => <li key={b}><IconCheck size={14} stroke={2.2} /><span>{b}</span></li>)}
            </ul>
            <div className="sikh-pkg-foot">
              <div>
                <div className="sikh-pkg-from">From / pilgrim</div>
                <div className="sikh-pkg-price">{p.price}</div>
                <div className="sikh-pkg-note">{p.note}</div>
              </div>
              <button
                className={`btn ${p.primary ? 'btn-primary' : 'btn-outline'} btn-sm`}
                onClick={() => openWhatsAppForIntent({
                  action: "request a Sikh Yatra quote",
                  source: "Sikh Yatra package card",
                  packageName: p.name,
                  destination: p.from,
                  duration: p.dur,
                  price: p.price,
                })}
              >
                Request quote <IconArrowRight size={13} />
              </button>
            </div>
          </Reveal>
        ))}
      </div>
    </div>

    {/* ITINERARY TIMELINE */}
    <div className="container" style={{ marginTop: 96 }}>
      <Reveal as="div" {...{ className: 'sikh-subhead' }}>
        <div className="ticket-rule" style={{ color: 'rgba(255,255,255,0.6)' }}>Sample 8-day route · LHE → KTP → EMI → NKS → HSB → ISB</div>
      </Reveal>
      <div className="sikh-timeline">
        {ITINERARY.map((d, i) => (
          <Reveal as="div" key={d.day} {...{ className: 'sikh-day' }} delay={(i%4)*60}>
            <div className="sikh-day-tag">
              <span className="sikh-day-num">DAY {d.day}</span>
              <span className="sikh-day-city">· {d.city}</span>
            </div>
            <div className="sikh-day-title">{d.title}</div>
            <div className="sikh-day-note">{d.note}</div>
          </Reveal>
        ))}
      </div>
    </div>

    {/* INFO ROW: visa + calendar */}
    <div className="container" style={{ marginTop: 80 }}>
      <div className="sikh-info">
        <Reveal as="div" {...{ className: 'sikh-info-card' }}>
          <div className="uppercase-label" style={{ color: '#E4A93C' }}>— Visa & access —</div>
          <h3>How to travel for Sikh Yatra</h3>
          <ul className="sikh-info-list">
            <li>
              <strong>Kartarpur Corridor</strong>
              <span>Visa-free for Indian Sikh pilgrims · USD 20 service charge · dawn-to-dusk · no overnight. We coordinate the corridor crossing and same-day return.</span>
            </li>
            <li>
              <strong>SGPC / Akal Takht sponsorship</strong>
              <span>Indian pilgrims travelling to Nankana, Panja Sahib and beyond apply via SGPC under the Bilateral Protocol on Visits to Religious Shrines, 1974.</span>
            </li>
            <li>
              <strong>Visa on Arrival</strong>
              <span>Sikhs from the UK, US, Canada, Australia and 120+ third countries are eligible for free visa-on-arrival, processed within 24 hours.</span>
            </li>
            <li>
              <strong>NADRA e-Visa</strong>
              <span>For pilgrims who prefer to apply in advance, we handle the NADRA online pilgrim visa application and invitation letter end-to-end.</span>
            </li>
          </ul>
        </Reveal>

        <Reveal as="div" {...{ className: 'sikh-info-card' }} delay={120}>
          <div className="uppercase-label" style={{ color: '#E4A93C' }}>— Religious calendar 2026 —</div>
          <h3>Key dates we run yatra around</h3>
          <ul className="sikh-calendar">
            <li>
              <div className="sikh-cal-date">
                <span className="d">14</span>
                <span className="m">APR</span>
              </div>
              <div>
                <div className="sikh-cal-title">Vaisakhi</div>
                <div className="sikh-cal-note">Khalsa founding day. Main ceremony at Panja Sahib, Hassan Abdal. Pakistan typically issues 2,800+ visas to Indian Sikh pilgrims.</div>
              </div>
            </li>
            <li>
              <div className="sikh-cal-date">
                <span className="d">16</span>
                <span className="m">JUN</span>
              </div>
              <div>
                <div className="sikh-cal-title">Shaheedi Guru Arjan Dev Ji</div>
                <div className="sikh-cal-note">Martyrdom day. Special seva and prayers at Gurdwara Dera Sahib, Lahore.</div>
              </div>
            </li>
            <li>
              <div className="sikh-cal-date">
                <span className="d">04</span>
                <span className="m">NOV</span>
              </div>
              <div>
                <div className="sikh-cal-title">Prakash Purab</div>
                <div className="sikh-cal-note">Birth anniversary of Guru Nanak Dev Ji. The largest yatra of the year — main ceremonies at Janam Asthan, Nankana Sahib.</div>
              </div>
            </li>
          </ul>
        </Reveal>
      </div>
    </div>

    {/* CTA */}
    <div className="container" style={{ marginTop: 80, textAlign: 'center' }}>
      <Reveal>
        <button
          className="btn btn-primary btn-lg"
          onClick={() => openWhatsAppForIntent({
            action: "plan a complete Sikh Yatra",
            source: "Sikh Yatra CTA",
            destination: "Pakistan Sikh pilgrimage circuit",
          })}
        >
          Plan your yatra <IconArrowRight size={16} />
        </button>
        <button
          className="btn btn-ghost btn-lg"
          onClick={() => openWhatsAppForIntent({
            action: "talk to a Sikh Yatra coordinator",
            source: "Sikh Yatra CTA",
            destination: "Kartarpur / Nankana / Panja Sahib",
          })}
          style={{ marginLeft: 12 }}
        >
          <IconWhatsapp size={16} /> Talk to a yatra coordinator
        </button>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { SikhYatra });