// About page

function AboutStory() {
  const bp = useBP();
  const mob = bp === 'mobile';
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: TNF.cream }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: bpv(bp, '1fr', '1fr 1fr', '1fr 1fr'), gap: bpv(bp, 40, 48, 80), alignItems: 'center' }}>
        <div>
          <SectionEyebrow>Our story</SectionEyebrow>
          <H2 style={{ fontWeight: 700 }}>A travel agency<br/>built on family.</H2>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            marginTop: 24, padding: '10px 18px', borderRadius: 999,
            background: '#fff', border: `1px solid ${TNF.lineSoft}`,
            fontSize: 13, color: TNF.blueDk, fontWeight: 500,
          }}>
            <span style={{ display: 'inline-flex', width: 24, height: 16, borderRadius: 3, overflow: 'hidden', boxShadow: '0 0 0 1px rgba(0,0,0,0.08)' }}>
              <svg viewBox="0 0 24 16" width="24" height="16" aria-label="India">
                <rect width="24" height="16" fill="#fff"/>
                <rect width="24" height="5.33" fill="#FF9933"/>
                <rect y="10.67" width="24" height="5.33" fill="#138808"/>
                <circle cx="12" cy="8" r="2.1" fill="none" stroke="#000080" strokeWidth="0.5"/>
                <circle cx="12" cy="8" r="0.5" fill="#000080"/>
              </svg>
            </span>
            <span>India</span>
            <span style={{ color: TNF.inkSoft, opacity: 0.5 }}>—</span>
            <span style={{ display: 'inline-flex', width: 24, height: 16, borderRadius: 3, overflow: 'hidden', boxShadow: '0 0 0 1px rgba(0,0,0,0.08)' }}>
              <svg viewBox="0 0 24 16" width="24" height="16" aria-label="Oman">
                <rect width="24" height="16" fill="#fff"/>
                <rect x="7" y="5.33" width="17" height="5.34" fill="#DB161B"/>
                <rect x="7" y="10.67" width="17" height="5.33" fill="#119B48"/>
                <rect x="0" y="0" width="7" height="16" fill="#DB161B"/>
                <rect x="3.3" y="1.4" width="0.5" height="3.4" fill="#fff"/>
                <rect x="2.5" y="2.4" width="2.1" height="0.5" fill="#fff" transform="rotate(-22 3.55 2.65)"/>
              </svg>
            </span>
            <span>Sultanate of Oman</span>
          </div>
          <div style={{ marginTop: 24, fontSize: 16, lineHeight: 1.75, color: TNF.inkSoft, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ margin: 0 }}>
              Trips N Flys started in 2022 with a simple idea: that travel should feel personal again. Not boxed packages, not pushy salespeople — just thoughtful planning by people who actually love what they do.
            </p>
            <p style={{ margin: 0 }}>
              The agency was founded in <strong style={{ color: TNF.blueDk, fontWeight: 600 }}>Piravom, Kerala — India</strong> by a young entrepreneur whose own travels across Europe, Southeast Asia, and the Middle East convinced him that most agencies got the basics wrong: opaque pricing, slow responses, generic itineraries. He set out to build the kind of agency he himself would want to book with.
            </p>
            <p style={{ margin: 0 }}>
              When his elder brother — a hospitality industry veteran with over 2 decades of experience across the <strong style={{ color: TNF.blueDk, fontWeight: 600 }}>Sultanate of Oman</strong> — joined as a partner, the second piece clicked into place. Today, that mix of youthful ambition and deep Gulf-side operational expertise shapes every booking we touch.
            </p>
          </div>
        </div>
        <div style={{ position: 'relative', marginBottom: mob ? 20 : 0 }}>
          <div style={{ position: 'relative', height: bpv(bp, 360, 460, 560), borderRadius: 18, overflow: 'hidden' }}>
            <Img photo="omanCoast" style={{ width: '100%', height: '100%' }}/>
          </div>
          <div style={{
            position: 'absolute', bottom: mob ? -16 : -28, left: mob ? 12 : -28,
            background: '#fff', padding: mob ? '16px 18px' : '20px 24px', borderRadius: 14,
            boxShadow: '0 12px 32px rgba(0,0,0,0.12)', maxWidth: mob ? 240 : 280,
          }}>
            <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: TNF.turqDk, fontWeight: 600 }}>Our roots</div>
            <div style={{ fontFamily: 'var(--tnf-display)', fontSize: 22, color: TNF.blueDk, marginTop: 6, lineHeight: 1.2, fontWeight: 500 }}>From Piravom, India to the Sultanate of Oman, and home again.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MissionValues() {
  const bp = useBP();
  const mob = bp === 'mobile';
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', '1fr 1fr', '1fr 1fr'), gap: bpv(bp, 36, 48, 80) }}>
          <div style={{ padding: bpv(bp, '28px 0', '40px 0', '40px 0'), borderTop: `4px solid ${TNF.green}` }}>
            <SectionEyebrow color={TNF.greenDk}>Our mission</SectionEyebrow>
            <p style={{ fontFamily: 'var(--tnf-display)', fontSize: mob ? 24 : 30, lineHeight: 1.3, color: TNF.blueDk, marginTop: 8, fontWeight: 400, letterSpacing: '-0.01em' }}>
              To make every trip seamless, memorable, and personal — by combining experience, integrity, and genuine care.
            </p>
          </div>
          <div style={{ padding: bpv(bp, '28px 0', '40px 0', '40px 0'), borderTop: `4px solid ${TNF.turq}` }}>
            <SectionEyebrow color={TNF.turqDk}>Our vision</SectionEyebrow>
            <p style={{ fontFamily: 'var(--tnf-display)', fontSize: mob ? 24 : 30, lineHeight: 1.3, color: TNF.blueDk, marginTop: 8, fontWeight: 400, letterSpacing: '-0.01em' }}>
              To become a trusted travel partner across Kerala and the Gulf — known for warmth, reliability, and meaningful experiences.
            </p>
          </div>
        </div>

        <div style={{ marginTop: mob ? 52 : 80, textAlign: 'center', marginBottom: mob ? 32 : 48 }}>
          <SectionEyebrow>What we stand for</SectionEyebrow>
          <H2 style={{ fontWeight: 700 }}>Four values, no compromises.</H2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr', 'repeat(2, 1fr)', 'repeat(4, 1fr)'), gap: bpv(bp, 16, 20, 24) }}>
          {[
            { v: 'Integrity',       d: 'Transparent pricing, honest advice. We’d rather lose a booking than mislead a traveller.', i: 'shield' },
            { v: 'Reliability',     d: 'When we say it’s done, it’s done. Flight confirmations, visa appointments, transfers — we own the details.', i: 'check' },
            { v: 'Personalisation', d: 'No two travellers want the same trip. We listen first, propose later, adjust as needed.', i: 'user' },
            { v: 'Partnership',     d: 'We’re here for your next trip, and the one after. Long-term, not transactional.', i: 'globe' },
          ].map((c, i) => {
            const Ic = Icon[c.i];
            return (
              <div key={c.v} style={{ padding: 28, borderRadius: 16, background: TNF.cream, border: `1px solid ${TNF.lineSoft}` }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: [TNF.green, TNF.turq, TNF.blue, TNF.greenDk][i],
                  color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 18,
                }}>
                  <Ic width={20} height={20}/>
                </div>
                <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 20, color: TNF.blueDk, margin: 0, fontWeight: 500 }}>{c.v}</h3>
                <p style={{ fontSize: 13, color: TNF.inkSoft, marginTop: 8, lineHeight: 1.6, marginBottom: 0 }}>{c.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Timeline() {
  const bp = useBP();
  const mob = bp === 'mobile';
  const events = [
    { y: '2022', t: 'Founded in Piravom', d: 'Started with one desk, one phone, and a handful of Kerala-to-Europe bookings.', accent: 'green' },
    { y: '2023', t: 'Visa consultancy launch', d: 'Expanded into end-to-end visa documentation as repeat clients asked for help.', accent: 'turq' },
    { y: '2024', t: 'Oman hospitality partnership', d: 'Co-founder’s industry network in the Sultanate opened up B2B opportunities.', accent: 'green' },
    { y: '2025', t: 'Crossed 200 trips planned', d: 'Hit our first major milestone. Average client satisfaction: 4.9 stars.', accent: 'turq' },
    { y: '2026', t: 'Corporate travel desk', d: 'Now managing travel for businesses across IT, manufacturing, and trading.', accent: 'green' },
  ];

  const refs = React.useRef([]);
  const [visible, setVisible] = React.useState(() => new Set());

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const i = Number(entry.target.dataset.idx);
            setVisible(prev => {
              if (prev.has(i)) return prev;
              const next = new Set(prev);
              next.add(i);
              return next;
            });
          }
        });
      },
      { threshold: 0.4, rootMargin: '0px 0px -8% 0px' }
    );
    refs.current.forEach(el => el && observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section style={{ padding: bpv(bp, '52px 20px 56px', '64px 36px 72px', '80px 56px 88px'), background: TNF.cream }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: mob ? 32 : 44 }}>
          <SectionEyebrow>Milestones</SectionEyebrow>
          <H2 style={{ fontWeight: 700 }}>A short, real journey.</H2>
        </div>
        <div style={{ position: 'relative', paddingLeft: mob ? 0 : 132 }}>
          {/* Vertical spine */}
          <div style={{
            position: 'absolute', left: mob ? 6 : 132, top: 16, bottom: 16, width: 1.5,
            background: `linear-gradient(to bottom, transparent, ${TNF.turq}40 6%, ${TNF.green}40 94%, transparent)`,
          }}/>

          {events.map((e, i) => {
            const accent   = e.accent === 'green' ? TNF.green   : TNF.turq;
            const accentDk = e.accent === 'green' ? TNF.greenDk : TNF.turqDk;
            const isVis = visible.has(i);
            return (
              <div
                key={e.y}
                ref={el => (refs.current[i] = el)}
                data-idx={i}
                style={{
                  position: 'relative',
                  paddingBottom: i === events.length - 1 ? 0 : (mob ? 22 : 28),
                }}
              >
                {/* Year — left of spine (desktop) or inline above card (mobile) */}
                <div style={{
                  position: mob ? 'static' : 'absolute', left: -132, top: 18, width: mob ? 'auto' : 104,
                  textAlign: mob ? 'left' : 'right',
                  marginLeft: mob ? 32 : 0, marginBottom: mob ? 6 : 0,
                  fontFamily: 'var(--tnf-display)', fontSize: mob ? 30 : 40,
                  fontWeight: 500, lineHeight: 1, color: TNF.blueDk,
                  letterSpacing: '-0.02em',
                  opacity: isVis ? 1 : 0.25,
                  transform: isVis ? 'translateX(0)' : 'translateX(-16px)',
                  transition: 'opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)',
                }}>
                  {e.y}
                </div>

                {/* Node — hollow ring on the spine */}
                <div style={{
                  position: 'absolute', left: mob ? -0.25 : -6.25, top: mob ? 4 : 26, width: 14, height: 14,
                  borderRadius: '50%', background: TNF.cream,
                  border: `2.5px solid ${accent}`,
                  boxShadow: isVis ? `0 0 0 5px ${accent}1f` : 'none',
                  transform: isVis ? 'scale(1)' : 'scale(0.4)',
                  transition: 'transform .6s cubic-bezier(.2,1.4,.4,1), box-shadow .8s ease',
                  zIndex: 1,
                }}/>

                {/* Card */}
                <div className="tnf-tl-card" style={{
                  marginLeft: mob ? 32 : 44,
                  background: '#fff', padding: mob ? '18px 22px' : '22px 30px', borderRadius: 14,
                  border: `1px solid ${TNF.lineSoft}`,
                  boxShadow: '0 6px 20px rgba(11,38,48,0.045)',
                  opacity: isVis ? 1 : 0,
                  transform: isVis ? 'translateX(0)' : 'translateX(24px)',
                  transition: 'opacity .7s cubic-bezier(.2,.7,.2,1) .1s, transform .7s cubic-bezier(.2,.7,.2,1) .1s, box-shadow .3s ease',
                }}>
                  <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: 22, color: TNF.blueDk, margin: 0, fontWeight: 500, letterSpacing: '-0.01em' }}>{e.t}</h3>
                  <p style={{ fontSize: 14.5, color: TNF.inkSoft, marginTop: 8, lineHeight: 1.6, marginBottom: 0 }}>{e.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TeamGrid() {
  const bp = useBP();
  const mob = bp === 'mobile';
  const team = [
    { n: 'Aravind Pillai', r: 'Founder & Lead Consultant',  bio: 'Travel-obsessed entrepreneur. Drives the leisure and outbound desk.',         photo: 'founder' },
    { n: 'Vinod Pillai',   r: 'Co-Founder & Operations',     bio: 'Hospitality veteran from the Sultanate of Oman. Owns partnerships & ops.', photo: 'founder2' },
    { n: 'Anjali Menon',   r: 'Senior Travel Consultant',    bio: 'Europe & Schengen specialist. Twelve countries personally scouted.',        photo: null },
    { n: 'Hari S.',        r: 'Corporate Travel Desk',        bio: 'Manages our corporate accounts and group bookings.',                       photo: null },
  ];
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: mob ? 'flex-start' : 'flex-end', justifyContent: 'space-between', marginBottom: mob ? 32 : 48, flexDirection: mob ? 'column' : 'row', gap: mob ? 16 : 0 }}>
          <div>
            <SectionEyebrow>The team</SectionEyebrow>
            <H2>People you’ll<br/>actually talk to.</H2>
          </div>
          <p style={{ fontSize: 14, color: TNF.inkSoft, maxWidth: 360, lineHeight: 1.6 }}>
            Small team, on purpose. Every traveller gets a dedicated consultant who knows their trip end-to-end.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: bpv(bp, '1fr 1fr', 'repeat(2, 1fr)', 'repeat(4, 1fr)'), gap: bpv(bp, 14, 20, 24) }}>
          {team.map(t => (
            <div key={t.n} style={{ background: TNF.cream, borderRadius: 18, overflow: 'hidden', border: `1px solid ${TNF.lineSoft}` }}>
              <div style={{ height: bpv(bp, 200, 240, 280), background: TNF.line, position: 'relative' }}>
                {t.photo ? (
                  <Img photo={t.photo} style={{ width: '100%', height: '100%' }}/>
                ) : (
                  <div style={{
                    width: '100%', height: '100%',
                    background: `linear-gradient(135deg, ${TNF.turq}, ${TNF.blue})`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#fff', fontFamily: 'var(--tnf-display)', fontSize: 64, fontWeight: 500,
                  }}>{t.n.split(' ').map(s => s[0]).join('')}</div>
                )}
              </div>
              <div style={{ padding: mob ? '16px 16px' : '20px 22px' }}>
                <h3 style={{ fontFamily: 'var(--tnf-display)', fontSize: mob ? 19 : 22, color: TNF.blueDk, margin: 0, fontWeight: 500 }}>{t.n}</h3>
                <div style={{ fontSize: 12, color: TNF.greenDk, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4 }}>{t.r}</div>
                <p style={{ fontSize: 13, color: TNF.inkSoft, marginTop: 12, lineHeight: 1.55, marginBottom: 0 }}>{t.bio}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutNumbers() {
  const bp = useBP();
  return (
    <section style={{ padding: secPad(bp, 80, 56), background: TNF.blueXdk, color: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: bpv(bp, '1fr 1fr', 'repeat(4, 1fr)', 'repeat(4, 1fr)'), gap: bpv(bp, 28, 32, 40), textAlign: 'left' }}>
        {[
          { n: '280+', l: 'trips planned' },
          { n: '40+',  l: 'destinations covered' },
          { n: '4.9★', l: 'average rating' },
          { n: '25+',  l: 'years collective experience' },
        ].map(s => (
          <div key={s.l}>
            <div style={{ fontFamily: 'var(--tnf-display)', fontSize: bpv(bp, 46, 56, 64), fontWeight: 500, color: TNF.green, lineHeight: 1 }}>{s.n}</div>
            <div style={{ fontSize: 13, opacity: 0.75, marginTop: 8, letterSpacing: '0.05em' }}>{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <SiteShell active="About" overHero={true}>
      <PageHero
        eyebrow="About us"
        title={<>Built on family.<br/>Driven by detail.</>}
        lede="A small team of travel obsessives in Piravom, Kerala. We design holidays the way we'd want our own to be planned."
        photo="aboutHeader"
        height={580}
      />
      <AboutStory/>
      <AboutNumbers/>
      <MissionValues/>
      <Timeline/>
    </SiteShell>
  );
}
window.AboutPage = AboutPage;