/* ============================================================
   Wayfare — page sections
   Each section is a self-contained React component.
   ============================================================ */

/* ----------- Hero ----------- */
function Hero({ onOpenApp }) {
  const [query, setQuery] = useState('');
  const presets = [
  'Wheelchair user · Jaipur · 3 days',
  'Low vision · Bangalore · museums',
  'Sensory-friendly · Goa · with kids'];
  const goPlan = () => {
    const dest = (typeof window !== 'undefined' && window.WayfareSession?.isAuthed()) ? 'App.html' : 'Sign Up.html';
    if (query.trim()) sessionStorage.setItem('wayfare:pendingQuery', query);
    window.location.href = dest;
  };


  return (
    <section id="hero" className="section" style={{ paddingTop: 40, paddingBottom: 56 }}>
      <div className="wrap col-2 col-2--hero" style={{ gap: 40 }}>
        <div>
          <span className="eyebrow">AI-powered accessible travel</span>
          <h1 className="h-display" style={{ marginTop: 18, width: "312px" }}>
            Travel you can <em>actually</em><br />trust — for every body.
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            Wayfare is an AI travel companion for the <strong>1.3 billion travellers with disabilities</strong> mainstream platforms leave behind. Plan a trip in your own words. Get scout-verified venues, transparent Lighthouse Accessibility Scores, and on-call AI eyes when you need them.
          </p>

          <div style={{ marginTop: 28 }}>
            <VoiceInput
              value={query}
              onChange={setQuery}
              onSubmit={goPlan}
              presets={presets} />
            
          </div>

          <div className="row" style={{ marginTop: 22, gap: 28, fontSize: 13 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--muted)' }}>
              <Icon.bedrock /> Free for travellers
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--muted)' }}>
              <Icon.shield /> Scouts accompany you on the ground
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--muted)' }}>
              <Icon.sparkle /> 3 plan options, one tap to switch
            </span>
          </div>
        </div>

        {/* Right side: app preview */}
        <div style={{ position: 'relative' }}>
          <AppPreview initialScreen="plan" />
          {/* Floating annotations */}
          <FloatingAnnotation
            text="Voice or text — Voice input"
            style={{ top: '14%', left: '-12%' }} />
          
          <FloatingAnnotation
            text="Profile stays on your device"
            style={{ bottom: '18%', right: '-8%' }}
            color="var(--accent)" />
          
        </div>
      </div>
    </section>);

}

function FloatingAnnotation({ text, style, color = 'var(--primary)' }) {
  return (
    <div style={{
      position: 'absolute',
      ...style,
      background: 'var(--surface)',
      border: '1.5px solid var(--ink)',
      padding: '6px 12px',
      borderRadius: 999,
      fontSize: 12,
      fontWeight: 600,
      whiteSpace: 'nowrap',
      boxShadow: '0 8px 18px -8px rgba(0,0,0,0.2)',
      display: 'flex', alignItems: 'center', gap: 6
    }} aria-hidden="true">
      <span style={{ width: 7, height: 7, borderRadius: 999, background: color }} />
      {text}
    </div>);

}

/* ----------- Marquee ----------- */
function Marquee() {
  const items = ['Wheelchair users', 'Travellers with low vision', 'Deaf & hard-of-hearing', 'Autistic adults', 'Diabetics on insulin', 'Older travellers', 'Parents with strollers', 'Anyone underserved'];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {[...items, ...items].map((t, i) =>
        <React.Fragment key={i}>
            <span>{t}</span>
            <span className="marquee__dot" />
          </React.Fragment>
        )}
      </div>
    </div>);

}

/* ----------- Problem ----------- */
function Problem() {
  const points = [
  { stat: '1.3B', label: 'People with disabilities globally', sub: 'Underserved by mainstream travel.' },
  { stat: '$58B', label: 'Accessible travel market', sub: 'Growing 11% YoY.' },
  { stat: '4×', label: 'Longer to plan a trip', sub: 'Versus the average traveller.' },
  { stat: '0', label: 'Trusted accessibility scoring standard', sub: 'No FICO or hygiene rating equivalent.' }];

  return (
    <section id="problem" className="section section--alt">
      <div className="wrap">
        <span className="eyebrow">The problem</span>
        <h2 className="h-section" style={{ marginTop: 14, maxWidth: '18ch' }}>
          "Wheelchair accessible" is <em>a checkbox</em>. Real travel needs a paragraph.
        </h2>
        <p className="lede" style={{ marginTop: 18 }}>
          Travel platforms optimise for the average traveller. For everyone else, planning a trip is exhausting, fragmented, untrustworthy — a tax no other segment pays.
        </p>

        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginTop: 48 }}>
          {points.map((p) =>
          <div key={p.label} className="card" style={{ background: 'transparent', border: 0, borderTop: '2px solid var(--ink)', borderRadius: 0, paddingInline: 0 }}>
              <div className="h-display" style={{ fontSize: 'clamp(56px, 7vw, 88px)', lineHeight: 1 }}>{p.stat}</div>
              <div style={{ marginTop: 12, fontSize: 16, fontWeight: 600 }}>{p.label}</div>
              <div style={{ marginTop: 4, color: 'var(--muted)', fontSize: 14 }}>{p.sub}</div>
            </div>
          )}
        </div>

        {/* Failure receipts */}
        <div style={{ marginTop: 64, display: 'grid', gap: 14, gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
          {[
          { tag: 'Hotel data', text: '“Wheelchair accessible” with no info on doorway widths, bathroom dimensions, or bed heights.' },
          { tag: 'Generic AI', text: 'Trip planners hallucinate accessibility claims with no human verification or accountability.' },
          { tag: 'Reviews', text: 'Travellers spend hours cross-checking forums, calling venues, and hoping for the best.' }].
          map((r) =>
          <div key={r.tag} style={{ padding: '20px 0', borderTop: '1.5px solid var(--ink)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--primary)', fontWeight: 700 }}>● {r.tag}</div>
              <p style={{ marginTop: 10, fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.3 }}>{r.text}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ----------- How it works ----------- */
function HowItWorks() {
  const steps = [
  {
    n: '01',
    title: 'Speak it. Type it. Either works.',
    desc: 'Tell Wayfare your trip in plain English — dates, needs, vibe. The Wayfare AI parses it, no checkbox jungle.',
    tag: 'Voice or text · your words'
  },
  {
    n: '02',
    title: 'Pick from three drafts.',
    desc: 'The Agent returns three full itineraries — Heritage, Slow & sensory-friendly, or Outdoor & active — each scout-verified end to end. Choose your pace, then drill in day-by-day.',
    tag: 'Three plans · one tap to switch'
  },
  {
    n: '03',
    title: 'A real human travels with you.',
    desc: 'Scouts — disabled travellers with lived experience — meet you at the airport, walk you into venues, hand off to specialists, and stay on-call. You see exactly when and where.',
    tag: 'Scout team · hand-offs on the timeline'
  },
  {
    n: '04',
    title: 'Live AI, in your pocket.',
    desc: 'Point your camera at anything — door, sign, menu. Wayfare describes it out loud and answers any question by voice. Every venue carries a transparent Wayfare Score with evidence.',
    tag: 'Camera + voice · live narration'
  }];

  return (
    <section id="how" className="section">
      <div className="wrap">
        <span className="eyebrow">How it works</span>
        <h2 className="h-section" style={{ marginTop: 14, maxWidth: '22ch' }}>
          Four steps from "I'd like to go to Jaipur" to a trip <em>that works for you</em>.
        </h2>

        <div style={{ marginTop: 56, display: 'grid', gap: 0, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
          {steps.map((s, i) =>
          <div key={s.n} style={{
            padding: '32px 28px 36px',
            borderTop: '1.5px solid var(--ink)',
            borderRight: i < steps.length - 1 ? '1.5px solid var(--line)' : 'none',
            position: 'relative'
          }}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 600 }}>{s.n} / 04</div>
              <h3 className="h-card" style={{ marginTop: 14, maxWidth: '14ch' }}>{s.title}</h3>
              <p style={{ marginTop: 12, color: 'var(--ink-soft)', fontSize: 15.5, lineHeight: 1.55 }}>{s.desc}</p>
              <div style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', background: 'var(--primary-soft)', color: 'var(--primary-deep)', borderRadius: 999, fontSize: 12, fontFamily: 'var(--font-mono)', fontWeight: 600 }}>
                <Icon.bedrock width="14" height="14" /> {s.tag}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ----------- Wayfare Score explainer ----------- */
function LighthouseExplainer() {
  const [activeScore, setActiveScore] = useState(92);
  const criteria = [
  { name: 'Entry & navigation', weight: '20%' },
  { name: 'Bedroom & bathroom', weight: '20%' },
  { name: 'Dining & menus', weight: '15%' },
  { name: 'Staff training & awareness', weight: '15%' },
  { name: 'Sensory environment', weight: '10%' },
  { name: 'Emergency & evacuation', weight: '10%' },
  { name: 'Communication access', weight: '5%' },
  { name: 'Cost & companion access', weight: '5%' }];


  return (
    <section id="score" className="section section--ink">
      <div className="wrap">
        <span className="eyebrow">Wayfare Accessibility Score</span>
        <h2 className="h-section" style={{ marginTop: 14, maxWidth: '22ch', color: 'inherit' }}>
          A FICO score for accessibility — <em style={{ color: 'var(--accent)' }}>every number shows its work.</em>
        </h2>

        <div className="col-2 col-2--start" style={{ marginTop: 56, gap: 48 }}>
          {/* Big score */}
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <svg width="280" height="280" viewBox="0 0 280 280" style={{ maxWidth: '100%' }}>
              <defs>
                <linearGradient id="scoreRing" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="#6BAA75" />
                  <stop offset="1" stopColor="#F4A261" />
                </linearGradient>
              </defs>
              <circle cx="140" cy="140" r="110" fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="14" />
              <circle
                cx="140" cy="140" r="110"
                fill="none"
                stroke="url(#scoreRing)"
                strokeWidth="14"
                strokeLinecap="round"
                strokeDasharray={2 * Math.PI * 110}
                strokeDashoffset={2 * Math.PI * 110 * (1 - activeScore / 100)}
                transform="rotate(-90 140 140)"
                style={{ transition: 'stroke-dashoffset 600ms var(--easing)' }} />
              
              <text x="140" y="148" textAnchor="middle" fontFamily="var(--font-serif)" fontSize="92" fill="#fff">{activeScore}</text>
              <text x="140" y="178" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="13" letterSpacing="3" fill="var(--accent)" fontWeight="700">/ 100 · GRADE A</text>
            </svg>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 18 }}>
              {[94, 78, 56].map((s) =>
              <button key={s} onClick={() => setActiveScore(s)} className="chip" aria-pressed={activeScore === s} style={{ background: activeScore === s ? 'var(--accent)' : 'transparent', color: activeScore === s ? 'var(--ink)' : 'rgba(255,255,255,0.8)', borderColor: 'rgba(255,255,255,0.3)' }}>
                  Example: {s}
                </button>
              )}
            </div>
          </div>

          {/* Criteria breakdown */}
          <div>
            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: '52ch', marginTop: 0, fontSize: 17 }}>
              Eight weighted criteria, audited from primary evidence — photo measurements, staff certifications, decibel readings, scout walk-throughs. Click each to see what's measured.
            </p>
            <div style={{ marginTop: 24, display: 'grid', gap: 2 }}>
              {criteria.map((c, i) =>
              <div key={c.name} style={{
                display: 'flex', alignItems: 'center', gap: 18,
                padding: '14px 0',
                borderTop: '1px solid rgba(255,255,255,0.12)'
              }}>
                  <span className="mono" style={{ color: 'var(--accent)', fontSize: 12, width: 30 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ flex: 1, fontSize: 16 }}>{c.name}</span>
                  <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, fontFamily: 'var(--font-mono)' }}>{c.weight}</span>
                </div>
              )}
            </div>
            <div style={{ marginTop: 28, padding: 18, background: 'rgba(255,255,255,0.05)', borderRadius: 14, borderLeft: '3px solid var(--accent)' }}>
              <strong style={{ fontFamily: 'var(--font-serif)', fontSize: 19, fontWeight: 500 }}>No black box.</strong>
              <p style={{ margin: '6px 0 0', color: 'rgba(255,255,255,0.75)', fontSize: 14.5 }}>
                Every score links to its evidence — door widths in cm, decibel averages, staff certifications, scout photos. Disagree? File a re-audit.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ----------- Scouts ----------- */
function Scouts() {
  const scouts = [
  { name: 'Aisha Verma', tag: 'Wheelchair user · Hotelier', visits: 142, color: '#1F4D3F', photo: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=300&h=300&fit=crop&auto=format' },
  { name: 'Rohan Kapoor', tag: 'Power chair · Heritage guide', visits: 64, color: '#C68B59', photo: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&auto=format' },
  { name: 'Maya Iyer', tag: 'Autistic adult · Food critic', visits: 211, color: '#7BAA80', photo: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=300&h=300&fit=crop&auto=format' },
  { name: 'Priya Singh', tag: 'Manual chair · Mobility lead', visits: 38, color: '#3A7CA5', photo: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop&auto=format' }];

  return (
    <section id="scouts" className="section">
      <div className="wrap">
        <div className="col-2 col-2--wide-right col-2--end" style={{ gap: 40 }}>
          <div>
            <span className="eyebrow">Verify · Accompany</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Behind every score — and on every trip — <em>a real human</em> with lived experience.
            </h2>
          </div>
          <p className="lede" style={{ marginBottom: 4 }}>
            Wayfare scouts are disabled travellers who audit venues in person <em>and</em> meet you on the ground. They greet you at the airport, walk you through check-in, hand off to specialists, and stay on-call. They publish under their name — accountability AI can't fake.
          </p>
        </div>

        <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', marginTop: 48 }}>
          {scouts.map((s) =>
          <div key={s.name} className="card" style={{ background: 'var(--surface-warm)' }}>
              <ScoutAvatar name={s.name} photo={s.photo} color={s.color} size={64} />
              <h3 className="h-card" style={{ marginTop: 16, fontSize: 22 }}>{s.name}</h3>
              <p style={{ color: 'var(--muted)', fontSize: 13.5, marginTop: 4 }}>{s.tag}</p>
              <div style={{ marginTop: 20, padding: '10px 0', borderTop: '1.5px solid var(--line)', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <Icon.shield width="14" height="14" />
                <span><strong>{s.visits}</strong> verified visits</span>
              </div>
            </div>
          )}
        </div>

        {/* AI + Human equation */}
        <div style={{ marginTop: 56, padding: 'clamp(24px, 4vw, 40px)', background: 'var(--bg-alt)', borderRadius: 22, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 24, alignItems: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <Icon.sparkle width="32" height="32" />
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 8 }}>AI for scale</div>
            <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>Wayfare AI parses your needs, ranks venues, summarises evidence.</p>
          </div>
          <div style={{ textAlign: 'center', fontSize: 32, fontFamily: 'var(--font-serif)', color: 'var(--accent-deep)' }}>×</div>
          <div style={{ textAlign: 'center' }}>
            <Icon.shield width="32" height="32" />
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 8 }}>Humans for truth</div>
            <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>Real disabled scouts audit in person and stake their name on it.</p>
          </div>
          <div style={{ textAlign: 'center', fontSize: 32, fontFamily: 'var(--font-serif)', color: 'var(--accent-deep)' }}>=</div>
          <div style={{ textAlign: 'center' }}>
            <Icon.star width="32" height="32" />
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 8 }}>A trip you trust</div>
            <p style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>No more hours calling hotels. No more 'fingers crossed'.</p>
          </div>
        </div>

        {/* Become a scout CTA */}
        <div style={{ marginTop: 32, padding: 'clamp(24px, 4vw, 40px)', background: 'var(--primary-deep)', color: 'var(--bg)', borderRadius: 22, display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ flex: '1 1 320px' }}>
            <span className="eyebrow" style={{ color: 'var(--accent)' }}>For scouts</span>
            <h3 className="h-card" style={{ marginTop: 10, color: '#fff', fontSize: 'clamp(24px, 2.4vw, 32px)' }}>
              Got lived experience? <em style={{ color: 'var(--accent)', fontStyle: 'italic', fontWeight: 500 }}>Get paid to share it.</em>
            </h3>
            <p style={{ marginTop: 10, color: 'rgba(255,255,255,0.75)', fontSize: 15, maxWidth: '52ch' }}>
              Audit venues you already know. Accompany travellers when you want to. Keep 70% of every fee, set your own pace.
            </p>
          </div>
          <a href="Sign Up.html" className="btn btn--accent btn--lg">
            Become a scout <Icon.arrow />
          </a>
        </div>
      </div>
    </section>);

}

/* ----------- App showcase ----------- */
function AppShowcase() {
  return (
    <section id="app" className="section section--alt">
      <div className="wrap">
        <span className="eyebrow">Live product preview</span>
        <h2 className="h-section" style={{ marginTop: 14, maxWidth: '20ch' }}>
          Play with the actual app. <em>Click anything.</em>
        </h2>
        <p className="lede" style={{ marginTop: 14 }}>
          Speak a trip, browse results, open a venue's score breakdown, point the camera at a doorway. It's all here.
        </p>

        <div className="col-2 col-2--start" style={{ marginTop: 56, gap: 48, gridTemplateColumns: 'minmax(0, 0.9fr) minmax(0, 1.2fr)' }}>
          <div>
            <AppPreview initialScreen="results" />
          </div>
          <div style={{ display: 'grid', gap: 18 }}>
            {[
            { n: '1', title: 'Plan with voice or text', desc: 'Tap the mic. The Wayfare AI does the rest.' },
            { n: '2', title: 'Pick from 3 drafts', desc: 'Heritage, Slow & sensory-friendly, or Outdoor & active — each scout-verified end-to-end.' },
            { n: '3', title: 'Day-by-day timeline', desc: 'Every stop time-stamped. Scouts appear on the rail at the exact moments they meet you.' },
            { n: '4', title: 'Live Camera AI', desc: 'Point. Hear it describe the scene. Ask any question by voice — answers read aloud.' },
            { n: '5', title: 'Emergency, always', desc: 'A red button on every screen, with location + profile sharing built in.' }].
            map((step, i, arr) =>
            <div key={step.n} style={{ display: 'flex', gap: 16, paddingBottom: i < arr.length - 1 ? 18 : 0, borderBottom: i < arr.length - 1 ? '1.5px solid var(--line)' : 'none' }}>
                <div style={{ width: 32, height: 32, flexShrink: 0, borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 13 }}>{step.n}</div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 20, margin: 0 }}>{step.title}</h3>
                  <p style={{ margin: '4px 0 0', color: 'var(--muted)', fontSize: 14.5 }}>{step.desc}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ----------- Camera + Voice deep-dive ----------- */
function CameraVoice() {
  return (
    <section className="section">
      <div className="wrap">
        <span className="eyebrow">Multimodal AI</span>
        <h2 className="h-section" style={{ marginTop: 14, maxWidth: '22ch' }}>
          A pair of <em>live AI eyes</em> and a <em>voice that listens, and replies.</em>
        </h2>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
          <FeatureCard
            tone="ink"
            icon={<Icon.camera width="26" height="26" />}
            tag="Live Camera AI"
            title="Point. Listen. Ask anything."
            desc="Your camera streams to Wayfare vision in real time. It narrates what it sees — door widths, ramps, signs, sensory load — out loud, every 5 seconds. Tap to ask a follow-up by voice."
            example={
            <div style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 12, padding: 14, fontSize: 14, lineHeight: 1.5 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--accent)', fontWeight: 700, textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>● Live narration</span>
                "I can see <em>a café entrance with two stone steps</em>, roughly 12 cm each. The side ramp on the right is gentle — about 1:14. Doorway looks 90 cm wide."
              </div>
            } />
          
          <FeatureCard
            tone="accent"
            icon={<Icon.mic width="26" height="26" />}
            tag="Ask anything"
            title="Hands-free questions. Spoken answers."
            desc="Tap Ask, speak your question. Wayfare answers about what's in front of you — door widths, ramp gradients, sign translations, noise levels — read aloud in plain English."
            example={
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, background: 'rgba(0,0,0,0.06)', borderRadius: 12 }}>
                <span className="wave" style={{ height: 28 }}><span /><span /><span /><span /><span /><span /></span>
                <em style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.3 }}>"Is the door wide enough for my chair?"</em>
              </div>
            } />
          
        </div>
      </div>
    </section>);

}

function FeatureCard({ tone, icon, tag, title, desc, example }) {
  const isInk = tone === 'ink';
  return (
    <div style={{
      padding: 'clamp(22px, 2.4vw, 32px)',
      background: isInk ? 'var(--ink)' : 'var(--accent)',
      color: isInk ? 'var(--bg)' : 'var(--ink)',
      borderRadius: 22,
      display: 'flex', flexDirection: 'column', gap: 16
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 42, height: 42, borderRadius: 999, background: isInk ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)', display: 'grid', placeItems: 'center' }}>{icon}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, opacity: 0.8 }}>{tag}</span>
      </div>
      <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(28px, 3vw, 38px)', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.05 }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, opacity: 0.92 }}>{desc}</p>
      <div style={{ marginTop: 'auto' }}>{example}</div>
    </div>);

}

/* ----------- Emergency ----------- */
function EmergencySection({ onTrigger }) {
  return (
    <section className="section" style={{ background: 'var(--emergency-soft)' }}>
      <div className="wrap col-2 col-2--wide-left" style={{ gap: 48 }}>
        <div>
          <span className="eyebrow" style={{ color: 'var(--emergency)' }}>Safety</span>
          <h2 className="h-section" style={{ marginTop: 14, maxWidth: '18ch' }}>
            One tap. Your <em style={{ color: 'var(--emergency)' }}>location, profile, and people</em>, instantly shared.
          </h2>
          <p className="lede" style={{ marginTop: 18 }}>
            The red button is on every screen — no menus, no nesting, no autoplay videos in the way. It calls 112, shares your live location with dispatch, and texts your emergency contacts. Your accessibility profile travels with the call.
          </p>
          <button className="btn btn--lg" onClick={onTrigger} style={{ marginTop: 24, background: 'var(--emergency)' }}>
            See the safety flow <Icon.arrow />
          </button>
        </div>

        <div style={{
          background: 'var(--surface)',
          borderRadius: 22,
          border: '2px solid var(--emergency)',
          padding: 24,
          boxShadow: '0 20px 50px -20px rgba(196, 48, 43, 0.35)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--emergency)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 18, animation: 'pulseRing 1.8s infinite' }}>!</span>
            <strong style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500 }}>Emergency · India 112</strong>
          </div>
          <div style={{ marginTop: 16, display: 'grid', gap: 8 }}>
            {[
            { label: 'Live GPS location', val: '26.9124° N, 75.7873° E' },
            { label: 'Accessibility profile', val: 'Wheelchair · Type-1 diabetic · O+' },
            { label: 'Emergency contacts', val: 'Mum, Priya — SMS sent' },
            { label: 'Preferred language', val: 'English, हिंदी' }].
            map((r) =>
            <div key={r.label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '10px 12px', background: 'var(--bg-alt)', borderRadius: 10, fontSize: 13 }}>
                <span style={{ color: 'var(--muted)' }}>{r.label}</span>
                <span style={{ fontWeight: 600, textAlign: 'right' }}>{r.val}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ----------- Market ----------- */
function Market() {
  return (
    <section className="section section--ink">
      <div className="wrap">
        <div className="col-2" style={{ gap: 56 }}>
          <div>
            <span className="eyebrow">The opportunity</span>
            <h2 className="h-section" style={{ marginTop: 14, color: 'inherit' }}>
              A <em style={{ color: 'var(--accent)' }}>$58 billion</em> market run on a checkbox.
            </h2>
            <p className="lede" style={{ marginTop: 18, color: 'rgba(255,255,255,0.75)' }}>
              The global accessible travel market is valued over $58B, growing at 11% YoY, and dominated by static, untrustworthy data. Whoever builds the trusted layer wins the segment — and unlocks adjacency to older travellers, parents, and the 1-in-6 of us who'll be temporarily disabled this year.
            </p>
          </div>
          <div>
            <svg viewBox="0 0 400 280" width="100%" style={{ maxWidth: 460 }} role="img" aria-label="Market growth chart">
              <defs>
                <linearGradient id="growGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#F4A261" stopOpacity="0.6" />
                  <stop offset="1" stopColor="#F4A261" stopOpacity="0" />
                </linearGradient>
              </defs>
              {/* grid */}
              {[60, 120, 180, 240].map((y) =>
              <line key={y} x1="40" x2="380" y1={y} y2={y} stroke="rgba(255,255,255,0.08)" />
              )}
              {/* labels x */}
              {['’23', '’24', '’25', '’26', '’27', '’28'].map((l, i) =>
              <text key={l} x={40 + i * 68} y="270" fill="rgba(255,255,255,0.45)" fontSize="11" fontFamily="var(--font-mono)" textAnchor="middle">{l}</text>
              )}
              {/* labels y */}
              {[
              { y: 60, l: '$90B' }, { y: 120, l: '$70B' }, { y: 180, l: '$50B' }, { y: 240, l: '$30B' }].
              map((t) =>
              <text key={t.l} x="32" y={t.y + 4} fill="rgba(255,255,255,0.45)" fontSize="11" fontFamily="var(--font-mono)" textAnchor="end">{t.l}</text>
              )}
              {/* area */}
              <path d="M40 230 L108 215 L176 196 L244 170 L312 138 L380 96 L380 250 L40 250 Z" fill="url(#growGrad)" />
              {/* line */}
              <path d="M40 230 L108 215 L176 196 L244 170 L312 138 L380 96" stroke="var(--accent)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
              {/* dots */}
              {[[40, 230], [108, 215], [176, 196], [244, 170], [312, 138], [380, 96]].map(([x, y], i) =>
              <circle key={i} cx={x} cy={y} r="4" fill="var(--bg)" stroke="var(--accent)" strokeWidth="2" />
              )}
              {/* callout */}
              <g transform="translate(244 170)">
                <circle r="9" fill="var(--accent)" />
                <text x="14" y="-12" fill="#fff" fontSize="12" fontWeight="700" fontFamily="var(--font-sans)">Today · $58B</text>
                <text x="14" y="4" fill="rgba(255,255,255,0.7)" fontSize="11" fontFamily="var(--font-sans)">+11% YoY</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>);

}

/* ----------- Team ----------- */
function Team() {
  return (
    <section id="team" className="section">
      <div className="wrap">
        <span className="eyebrow">The team</span>
        <h2 className="h-section" style={{ marginTop: 14 }}>
          Built by the <em>Wayfare</em> · AWS Wayfare AI track · 2026.
        </h2>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
          {[
          { role: 'Project Lead / PM', who: 'Zaid Pathan · Bhavik Bansal' },
          { role: 'LLM Engineer', who: 'AI / ML Team' },
          { role: 'Frontend', who: 'MERN / Python Team' },
          { role: 'QA & SOW', who: 'QA Team' }].
          map((r) =>
          <div key={r.role} className="card" style={{ background: 'var(--surface-warm)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--primary)', fontWeight: 700, textTransform: 'uppercase' }}>{r.role}</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 19, marginTop: 10, fontWeight: 500 }}>{r.who}</div>
            </div>
          )}
        </div>

        {/* Tech stack */}
        <div style={{ marginTop: 56, padding: 'clamp(20px, 3vw, 36px)', background: 'var(--ink)', color: 'var(--bg)', borderRadius: 22 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--accent)', fontWeight: 700, textTransform: 'uppercase', marginBottom: 18 }}>● What's included</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 18, fontFamily: 'var(--font-serif)' }}>
            {[
            { l: 'Smart trip planner', s: 'Speak or type. Get a full itinerary.' },
            { l: 'Live Camera AI', s: 'Hear what your camera sees. Ask anything.' },
            { l: 'Wayfare Score', s: '8-criterion accessibility rating, with evidence.' },
            { l: 'Scout team', s: 'Real humans on the ground, end to end.' },
            { l: 'One-tap safety', s: 'Location, profile and contacts shared instantly.' }].
            map((t) =>
            <div key={t.l} style={{ borderLeft: '2px solid var(--accent)', paddingLeft: 14 }}>
                <div style={{ fontSize: 20, fontWeight: 500 }}>{t.l}</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontFamily: 'var(--font-sans)', marginTop: 4 }}>{t.s}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ----------- FAQ ----------- */
function FAQ() {
  const [open, setOpen] = useState(0);
  const qs = [
  { q: 'How does Wayfare make money?', a: 'Wayfare is free for travellers. Scouts keep 70% of every accompaniment fee; we take a small platform cut on completed trips. No ads. No selling profile data. No surprise upsells.' },
  { q: 'Why a Wayfare Score? Aren\'t there other ratings?', a: 'Existing accessibility data is binary and unverified. The Wayfare Score is 8 weighted criteria audited from primary evidence — measurements, certifications, decibel readings — with full transparency on weighting. Think FICO, not star ratings.' },
  { q: 'How do the 3 plan options work?', a: 'The Wayfare AI drafts three full itineraries — Heritage & Palaces, Slow & sensory-friendly, and Outdoor & active — same dates, same accessibility profile, different vibes. Each is scout-verified end-to-end. Pick one, drill into the day-by-day, switch anytime.' },
  { q: 'How are scouts qualified, and what do they actually do?', a: 'Scouts are travellers with lived experience of the access need they audit (wheelchair, low vision, autistic adult, etc). They both verify venues in person AND accompany travellers on the ground — airport pickup, check-in walkthrough, specialist hand-offs, on-call hours. They publish under their real name with credentials visible.' },
  { q: 'Can I sign up as a scout?', a: 'Yes — pick the Scout role on the sign-up page. You enter your audit domains, lived experience, languages, and bio. Verification takes ~48 hours. Scouts keep 70% of every fee with weekly payouts.' },
  { q: 'Does it work with screen readers and keyboard nav?', a: 'Yes. Every interaction has a visible focus state, all controls have ARIA labels, the emergency button is reachable by keyboard from any screen, and we ship with reduced-motion and high-contrast modes.' },
  { q: 'What about privacy? You\'re asking for an accessibility profile.', a: 'Your profile is held on-device. We only send what you choose to share at the moment of a query. Emergency mode shares profile + location with dispatch only when you tap the red button.' },
  { q: 'Which cities are supported?', a: 'For this build, Jaipur is the seeded city with 142 verified venues. The architecture is city-agnostic — adding a new city is a dataset task, not a code change.' }];

  return (
    <section id="faq" className="section section--alt">
      <div className="wrap" style={{ maxWidth: 880 }}>
        <span className="eyebrow">FAQ</span>
        <h2 className="h-section" style={{ marginTop: 14 }}>Questions <em>you'd probably ask the judges.</em></h2>

        <div style={{ marginTop: 40, borderTop: '1.5px solid var(--ink)' }}>
          {qs.map((item, i) =>
          <div key={i} style={{ borderBottom: '1.5px solid var(--ink)' }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
              style={{
                width: '100%', background: 'transparent', border: 0, textAlign: 'left',
                padding: '20px 0', display: 'flex', alignItems: 'center', gap: 16,
                cursor: 'pointer', color: 'var(--ink)'
              }}>
              
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(18px, 1.8vw, 24px)', fontWeight: 500, flex: 1 }}>{item.q}</span>
                <span style={{
                width: 32, height: 32, borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                transition: 'transform var(--motion) var(--easing)'
              }}>
                  <Icon.plus />
                </span>
              </button>
              {open === i &&
            <div style={{ paddingBottom: 22, color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.6, maxWidth: '62ch' }} className="fade-up">
                  {item.a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ----------- Footer ----------- */
function Footer({ onOpenApp }) {
  const isAuthed = typeof window !== 'undefined' && window.WayfareSession?.isAuthed();
  const ctaHref = isAuthed ? 'App.html' : 'Sign Up.html';
  const ctaLabel = isAuthed ? 'Open the app' : 'Plan your first trip';
  return (
    <footer className="section" style={{ background: 'var(--primary-deep)', color: 'var(--bg)', paddingTop: 'clamp(60px, 7vw, 100px)', position: 'relative', overflow: 'hidden' }}>
      {/* Soft brand bloom */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-25%', right: '-15%',
        width: '60%', aspectRatio: '1',
        background: 'radial-gradient(circle, var(--accent) 0%, transparent 65%)',
        opacity: 0.16, filter: 'blur(40px)', pointerEvents: 'none',
      }} />

      <div className="wrap" style={{ position: 'relative' }}>
        <div className="col-2 col-2--wide-left col-2--end" style={{ gap: 48 }}>
          <div>
            <span className="eyebrow" style={{ color: 'var(--accent)' }}>Ready when you are</span>
            <h2 className="h-display" style={{ color: 'inherit', fontSize: 'clamp(40px, 6.4vw, 92px)', marginTop: 18, letterSpacing: '-0.025em' }}>
              Travel that{' '}
              <em style={{ color: 'var(--accent)', position: 'relative', display: 'inline-block' }}>
                actually works
                <svg viewBox="0 0 200 12" preserveAspectRatio="none" style={{ position: 'absolute', left: 0, right: 0, bottom: '-0.12em', width: '100%', height: '0.18em' }} aria-hidden="true">
                  <path d="M2 9 Q 50 1, 100 6 T 198 5" fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" opacity="0.55" />
                </svg>
              </em>
              {' '}for you.
            </h2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <p className="lede" style={{ color: 'rgba(255,255,255,0.78)', fontSize: 'clamp(16px, 1.3vw, 18.5px)', maxWidth: '40ch' }}>
              Create your accessibility profile in 90 seconds. Get scout-verified Jaipur recommendations immediately. Help is one tap away — always.
            </p>

            <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
              <a
                href={ctaHref}
                className="btn-cream"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 14,
                  padding: '8px 8px 8px 28px',
                  background: 'var(--bg)', color: 'var(--primary-deep)',
                  borderRadius: 999, textDecoration: 'none',
                  fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 'clamp(18px, 1.6vw, 22px)',
                  letterSpacing: '-0.01em',
                  transition: 'transform var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing)',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = ''; }}
              >
                <span>{ctaLabel}</span>
                <span style={{
                  width: 44, height: 44, borderRadius: 999,
                  background: 'var(--primary-deep)', color: 'var(--bg)',
                  display: 'grid', placeItems: 'center',
                }}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="18" height="18"><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></svg>
                </span>
              </a>

              {!isAuthed && (
                <a href="Sign In.html" style={{
                  fontSize: 14, color: 'rgba(255,255,255,0.75)',
                  textDecoration: 'none', fontWeight: 600,
                  borderBottom: '1.5px solid rgba(255,255,255,0.35)', paddingBottom: 2,
                }}>
                  I already have an account →
                </a>
              )}
            </div>

            <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap', marginTop: 4, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} /> Free for travellers
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} /> Free for travellers
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} /> No card to start
              </span>
            </div>
          </div>
        </div>

        <hr className="divider" style={{ background: 'rgba(255,255,255,0.15)', margin: '64px 0 28px' }} />

        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 18, fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Brandmark />
            <span>Wayfare · Wayfare · AI/LLM </span>
          </div>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <span>v1.0 · 15 May 2026</span>
            <span>AWS Wayfare AI track</span>
            <span>wayfare.travel</span>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Hero, Marquee, Problem, HowItWorks, LighthouseExplainer, Scouts,
  AppShowcase, CameraVoice, EmergencySection, Market, Team, FAQ, Footer
});