// Page sections: Features, How it works, Screens gallery, Download, Footer

function Features() {
  const items = [
    { icon: 'coffee', kicker: 'Cafés & coffee', title: 'Find the good espresso — and the emergency gas station donut.', body: 'Route Radar indexes cafés, coffee shops, and convenience stores along your GPX. Know where to caffeinate before the climb.' },
    { icon: 'wrench', kicker: 'Bike shops & repair', title: 'A flat at mile 48 is a story, not an emergency.', body: 'Bike shops and repair locations surface wherever your route passes them — with on-route distance, not just as-the-crow-flies.' },
    { icon: 'gpx', kicker: 'GPX & Strava', title: 'Drop a file, or pull the route you already built.', body: 'Import GPX files directly or sync routes from Strava. Works with anything that saves a line on a map.' },
    { icon: 'map', kicker: 'Focused mapping', title: 'Not a navigation app. Not a generic map.', body: 'Route Radar is a single-purpose tool: show me the stops that matter for the route I already plan to ride.' },
  ];
  return (
    <section id="features" style={{ padding: '120px 0 80px' }}>
      <div className="wrap">
        <div className="section-label">
          <span className="num">01</span>
          <span className="title">Features</span>
          <span className="line"/>
        </div>
        <div className="grid-feat-hdr" style={{maxWidth: 900}}>
          <h2 style={{fontSize:'clamp(38px, 4.8vw, 68px)', lineHeight: 1, letterSpacing:'-0.03em'}}>
            The stops you need, <em style={{fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight:400, color:'var(--brand)'}}>the ride you want.</em>
          </h2>
        </div>
        <div className="feat-cards">
          {items.map((it, i) => (
            <div key={i} style={{background:'var(--paper)', padding: '36px 32px'}}>
              <div style={{display:'flex', alignItems:'center', gap: 10, marginBottom: 18}}>
                <div style={{width:36, height:36, borderRadius:10, background:'var(--brand-soft)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--brand-deep)'}}>
                  <Icon name={it.icon} size={18} color="var(--brand-deep)"/>
                </div>
                <span className="mono">{it.kicker}</span>
              </div>
              <h3 style={{fontSize: 26, lineHeight: 1.12, letterSpacing:'-0.02em', marginBottom: 12, textWrap:'balance'}}>{it.title}</h3>
              <p style={{color:'var(--ink-2)', fontSize: 16, lineHeight: 1.55, margin: 0}}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Drop your route', d: 'Import a GPX file or link your Strava account. Route Radar reads your line in seconds — no redraw required.' },
    { n: '02', t: 'See what\'s along it', d: 'Cafés, bike shops, convenience stores — filtered by category and by how far off-route you\'re willing to detour.' },
    { n: '03', t: 'Ride with confidence', d: 'Open a stop for on-route mileage and a one-tap handoff to your navigation app. No surprises, no bonk.' },
  ];
  return (
    <section id="how" style={{ padding: '80px 0 120px', background: 'var(--paper-2)', position:'relative', overflow:'hidden' }}>
      <TopoBackground opacity={0.35}/>
      <div className="wrap" style={{ position:'relative', zIndex: 2 }}>
        <div className="section-label">
          <span className="num">02</span>
          <span className="title">How it works</span>
          <span className="line"/>
        </div>
        <h2 style={{fontSize:'clamp(38px, 4.8vw, 68px)', lineHeight: 1, letterSpacing:'-0.03em', maxWidth: 900, marginBottom: 72}}>
          Three taps from route to ready.
        </h2>

        <div className="grid-3" style={{position:'relative'}}>
          {/* Route line behind the cards */}
          <svg aria-hidden="true" className="hide-mobile" style={{position:'absolute', top: 40, left: 40, right: 40, height: 80, width: 'calc(100% - 80px)', zIndex: 0}} viewBox="0 0 1000 80" preserveAspectRatio="none">
            <path d="M 10 40 C 200 10, 400 70, 500 40 S 800 10, 990 40"
              stroke="var(--brand)" strokeWidth="2" strokeDasharray="4 6" fill="none"/>
          </svg>
          {steps.map((s, i) => (
            <div key={i} style={{position:'relative', zIndex: 1}}>
              <div style={{
                width: 80, height: 80, borderRadius: '50%',
                background: 'var(--cream)',
                border: '1px solid rgba(22,19,15,0.12)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'var(--font-display)', fontWeight:600, fontSize: 22,
                color:'var(--brand-deep)', marginBottom: 24,
                boxShadow: '0 8px 24px -10px rgba(0,0,0,0.15)'
              }}>{s.n}</div>
              <h3 style={{fontSize: 28, lineHeight: 1.1, letterSpacing:'-0.02em', marginBottom: 12}}>{s.t}</h3>
              <p style={{color:'var(--ink-2)', fontSize: 16, lineHeight: 1.55, margin: 0, maxWidth: 340}}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Screens() {
  const screens = [
    { src: 'assets/screens/01-find-along-route.png', kicker: 'Along route', caption: 'Categories · distance filters' },
    { src: 'assets/screens/02-stop-detail.png', kicker: 'Stop detail', caption: 'On-route · mile marker · navigate' },
    { src: 'assets/screens/03-filter.png', kicker: 'Filter', caption: 'Categories & brands' },
    { src: 'assets/screens/05-strava-routes.png', kicker: 'Strava sync', caption: 'Import rides you already saved' },
    { src: 'assets/screens/04-offline-packs.png', kicker: 'Offline packs', caption: 'Download by state, ride dark' },
  ];
  return (
    <section id="screens" style={{ padding: '120px 0', background: 'var(--ink)', color: 'var(--cream)', position:'relative', overflow:'hidden' }}>
      {/* Purple slab glow */}
      <div aria-hidden="true" style={{
        position:'absolute', left:'50%', top:'-20%', transform:'translateX(-50%)',
        width: 900, height: 900, borderRadius:'50%',
        background: 'radial-gradient(circle, rgba(123,47,255,0.35), transparent 60%)',
        pointerEvents:'none'
      }}/>
      <div className="wrap" style={{position:'relative', zIndex: 2}}>
        <div className="section-label" style={{'--line': '#fff'}}>
          <span className="num" style={{color: 'rgba(255,255,255,0.5)'}}>03</span>
          <span className="title" style={{color:'var(--cream)'}}>Screens</span>
          <span className="line" style={{background:'rgba(255,255,255,0.2)'}}/>
        </div>
        <div className="grid-2-align-end">
          <h2 style={{color:'var(--cream)', fontSize:'clamp(38px, 4.8vw, 68px)', lineHeight: 1, letterSpacing:'-0.03em'}}>
            A quiet map, <em style={{fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight:400, color:'#C9A6FF'}}>loud where it counts.</em>
          </h2>
          <p style={{color:'rgba(251,247,236,0.7)', fontSize: 17, maxWidth: 460, justifySelf:'end'}}>
            A focused interface with one job: show you cafés, shops, and repair stops
            exactly where your route passes them.
          </p>
        </div>

        <div className="grid-5">
          {screens.map((s, i) => (
            <div key={i} className={`screens-item${i % 2 !== 0 ? ' stagger' : ''}`}>
              <PhoneCard src={s.src} w={200} tilt={0}/>
              <div style={{marginTop: 20}}>
                <div className="mono" style={{color:'#C9A6FF'}}>{s.kicker}</div>
                <div style={{fontFamily:'var(--font-display)', fontSize: 14, fontWeight: 500, marginTop: 4, color:'var(--cream)'}}>{s.caption}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BigQuote() {
  return (
    <section style={{ padding: '100px 0', background: 'var(--paper)' }}>
      <div className="wrap grid-quote">
        <div className="mono">Design principle</div>
        <div>
          <blockquote style={{
            margin: 0,
            fontFamily: "'Instrument Serif', 'Fraunces', serif",
            fontSize: 'clamp(32px, 4vw, 56px)',
            lineHeight: 1.12, fontWeight: 400,
            letterSpacing: '-0.01em', color: 'var(--ink)'
          }}>
            Route Radar is a cycling planner, <span style={{color:'var(--brand)', fontStyle:'italic'}}>not a navigation app.</span>
            It does one thing: answer the question every rider asks before rolling out — <span style={{fontStyle:'italic'}}>where will I stop?</span>
          </blockquote>
          <div className="mono" style={{marginTop: 28}}>— Route Radar, working philosophy</div>
        </div>
      </div>
    </section>
  );
}

function DownloadCTA() {
  return (
    <section id="download" style={{ padding: '100px 0', background: 'var(--brand)', color: '#fff', position:'relative', overflow:'hidden' }}>
      {/* BG flourish */}
      <svg aria-hidden="true" style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity: 0.18, pointerEvents:'none'}} viewBox="0 0 1440 500" preserveAspectRatio="xMidYMid slice">
        <g stroke="#fff" strokeWidth="1" fill="none">
          {[...Array(10)].map((_,i)=>(
            <path key={i} d={`M -40 ${60+i*50} C 300 ${30+i*50}, 600 ${100+i*50}, 900 ${60+i*50} S 1300 ${20+i*50}, 1500 ${60+i*50}`}/>
          ))}
        </g>
      </svg>
      <div className="wrap grid-cta" style={{position:'relative', zIndex: 2}}>
        <div>
          <div className="mono" style={{color:'rgba(255,255,255,0.75)'}}>04 · Get it</div>
          <h2 style={{color:'#fff', fontSize:'clamp(44px, 6vw, 88px)', lineHeight: 0.98, letterSpacing:'-0.035em', marginTop: 14}}>
            Plan smarter.<br/>
            <em style={{fontFamily:"'Instrument Serif', serif", fontStyle:'italic', fontWeight:400}}>Ride lighter.</em>
          </h2>
          <p style={{color:'rgba(255,255,255,0.82)', fontSize: 19, maxWidth: 520, marginTop: 22}}>
            Download Route Radar free on iOS. Works with any GPX file, any route, any ride.
          </p>
          <div style={{display:'flex', gap: 14, marginTop: 32, flexWrap:'wrap', alignItems:'center'}}>
            <a className="appstore" href="#" style={{background:'#0b0a08'}}>
              <AppleGlyph size={26} color="#fff"/>
              <div style={{display:'flex', flexDirection:'column', lineHeight: 1}}>
                <span className="sm">Download on the</span>
                <span className="lg">App Store</span>
              </div>
            </a>
            <a href="#" className="btn" style={{background:'rgba(255,255,255,0.12)', color:'#fff', border:'1px solid rgba(255,255,255,0.28)'}}>
              <Icon name="download" size={14}/> Press kit
            </a>
          </div>
        </div>
        <div style={{display:'flex', justifyContent:'center'}}>
          <PhoneCard src="assets/screens/02-stop-detail.png" w={240} tilt={-3}/>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{padding: '56px 0 40px', background: 'var(--paper)', borderTop:'1px solid rgba(22,19,15,0.1)'}}>
      <div className="wrap grid-footer">
        <div>
          <Wordmark size={18}/>
          <p style={{marginTop: 16, color:'var(--ink-3)', fontSize: 14, maxWidth: 320}}>
            A focused cycling route planner. Made for riders who'd rather plan
            their espresso than their panic.
          </p>
        </div>
        <div>
          <div className="mono" style={{marginBottom: 12}}>Product</div>
          <FooterLink>Features</FooterLink>
          <FooterLink>How it works</FooterLink>
          <FooterLink>Changelog</FooterLink>
          <FooterLink>Roadmap</FooterLink>
        </div>
        <div>
          <div className="mono" style={{marginBottom: 12}}>Support</div>
          <FooterLink>Help center</FooterLink>
          <FooterLink>Contact</FooterLink>
          <FooterLink>Privacy</FooterLink>
          <FooterLink>Terms</FooterLink>
        </div>
        <div>
          <div className="mono" style={{marginBottom: 12}}>Data</div>
          <FooterLink>OpenStreetMap</FooterLink>
          <FooterLink>AllThePlaces</FooterLink>
          <FooterLink>Attribution</FooterLink>
        </div>
      </div>
      <div className="wrap">
        <div className="footer-bottom">
          <div className="mono">© 2026 Route Radar · All rides reserved</div>
          <div className="mono" style={{color:'var(--ink-3)'}}>POI data © OpenStreetMap contributors & AllThePlaces</div>
        </div>
      </div>
    </footer>
  );
}

function FooterLink({ children }) {
  return <a href="#" style={{display:'block', padding: '4px 0', fontSize: 14, color:'var(--ink-2)'}}>{children}</a>;
}

Object.assign(window, { Features, HowItWorks, Screens, BigQuote, DownloadCTA, Footer });