/* global React, Icon, Wordmark, Pill, useRoute, T */
/* Scanalytics landing page — purple accent, prism brand */
const { useState: useStateL } = React;

const NavLanding = ({ navigate }) => (
  <div className="nav">
    <div className="nav-inner">
      <a href="#/" onClick={(e)=>{e.preventDefault(); navigate("/");}}><Wordmark size={20} /></a>
      <nav className="nav-links">
        <a href="#how">How it works</a>
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div className="nav-cta">
        <a href="#/signin" className="btn btn-ghost" onClick={(e)=>{e.preventDefault(); navigate("/signin");}}>Sign in</a>
        <a href="#/signup" className="btn btn-primary" onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Get started</a>
      </div>
    </div>
  </div>
);

const HeroArt = () => (
  <div className="hero-art">
    <div className="hero-blob" />
    <div className="hero-shape s1" />
    <div className="hero-shape s2" />
    <div className="hero-shape s3" />
    <div className="hero-shape s4" />
    <svg viewBox="0 0 420 420" style={{ width: "86%", height: "86%", position: "relative", zIndex: 2, filter: "drop-shadow(0 20px 40px rgba(15,15,20,0.10))" }}>
      {/* menu card */}
      <g transform="translate(36 70) rotate(-6)">
        <rect width="180" height="240" rx="14" fill="#ffffff" stroke="#e5e5ea"/>
        <rect x="16" y="20" width="90" height="10" rx="3" fill="#0f0f14"/>
        <rect x="16" y="38" width="60" height="6" rx="2" fill="#e5e5ea"/>
        <line x1="16" y1="62" x2="164" y2="62" stroke="#f0f0f3"/>
        {[0,1,2,3,4].map(i => (
          <g key={i} transform={`translate(16 ${78 + i*30})`}>
            <rect width="100" height="8" rx="2" fill="#0f0f14" opacity="0.82"/>
            <rect y="14" width="60" height="5" rx="2" fill="#e5e5ea"/>
            <rect x="130" width="18" height="8" rx="2" fill="#a259ff" opacity={0.6 + i*0.08}/>
          </g>
        ))}
      </g>
      {/* phone */}
      <g transform="translate(180 80)">
        <rect width="180" height="300" rx="28" fill="#0f0f14"/>
        <rect x="8" y="8" width="164" height="284" rx="22" fill="#ffffff"/>
        <rect x="64" y="12" width="52" height="6" rx="3" fill="#0f0f14"/>
        <g transform="translate(38 40)">
          <rect width="104" height="104" rx="12" fill="#0f0f14"/>
          <rect x="10" y="10" width="20" height="20" rx="4" fill="#ffffff"/>
          <rect x="14" y="14" width="12" height="12" rx="2" fill="#0f0f14"/>
          <rect x="74" y="10" width="20" height="20" rx="4" fill="#ffffff"/>
          <rect x="78" y="14" width="12" height="12" rx="2" fill="#0f0f14"/>
          <rect x="10" y="74" width="20" height="20" rx="4" fill="#ffffff"/>
          <rect x="14" y="78" width="12" height="12" rx="2" fill="#0f0f14"/>
          {Array.from({length: 28}).map((_, i) => {
            const x = 38 + (i % 7) * 8;
            const y = 40 + Math.floor(i / 7) * 8;
            const on = [0,2,3,5,8,10,12,14,15,17,19,22,23,25,27].includes(i);
            return on ? <rect key={i} x={x} y={y} width="5" height="5" rx="1" fill="#ffffff"/> : null;
          })}
          <circle cx="52" cy="52" r="9" fill="#a259ff"/>
        </g>
        <g transform="translate(24 164)">
          <rect width="132" height="96" rx="10" fill="#fafafa"/>
          <path d="M10,70 C25,62 35,48 55,44 C75,40 85,28 105,20 L120,14" fill="none" stroke="#0acf83" strokeWidth="2.5" strokeLinecap="round"/>
          <circle cx="120" cy="14" r="3" fill="#0acf83"/>
          <rect x="10" y="80" width="40" height="6" rx="2" fill="#e5e5ea"/>
        </g>
        <rect x="24" y="268" width="132" height="16" rx="4" fill="#f24e1e"/>
      </g>
      <g transform="translate(270 40)">
        <rect width="138" height="36" rx="18" fill="#ffffff" stroke="#e5e5ea"/>
        <circle cx="18" cy="18" r="6" fill="#0acf83"/>
        <text x="32" y="23" fontFamily="Inter" fontSize="11" fontWeight="600" fill="#0f0f14">+42% item views</text>
      </g>
      <g transform="translate(10 320)">
        <rect width="150" height="36" rx="18" fill="#ffffff" stroke="#e5e5ea"/>
        <circle cx="18" cy="18" r="6" fill="#1abcfe"/>
        <text x="32" y="23" fontFamily="Inter" fontSize="11" fontWeight="600" fill="#0f0f14">128 scans today</text>
      </g>
    </svg>
  </div>
);

const Hero = ({ navigate }) => (
  <section className="hero wrap">
    <div className="hero-grid">
      <div>
        <Pill color="var(--brand-purple)" style={{ marginBottom: 24 }}>For independent restaurants</Pill>
        <h1 className="display h-xl">
          Turn every QR scan into a <em>business decision</em>.
        </h1>
        <p className="lead">
          Scanalytics replaces your QR menu with one that watches, learns, and tells you what your customers really want — in plain language, every week.
        </p>
        <div className="hero-ctas">
          <a href="#/signup" className="btn btn-primary btn-lg" onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>
            Start your free pilot <Icon.arrow />
          </a>
          <a href="#how" className="btn btn-ghost btn-lg">See how it works</a>
        </div>
        <div className="hero-proof">
          <div className="stat"><div className="stat-num">€0</div><div className="stat-lbl">to start</div></div>
          <div style={{width:1, height:32, background:"var(--border)"}} />
          <div className="stat"><div className="stat-num">&lt; 1 day</div><div className="stat-lbl">setup time</div></div>
          <div style={{width:1, height:32, background:"var(--border)"}} />
          <div className="stat"><div className="stat-num">10+</div><div className="stat-lbl">signals per scan</div></div>
        </div>
      </div>
      <HeroArt />
    </div>
  </section>
);

const Problem = () => (
  <section className="tint-red">
    <div className="wrap">
      <div className="section-head" style={{flexDirection:"column", alignItems:"flex-start"}}>
        <div>
          <span className="eyebrow" style={{color:"var(--brand-red)"}}>The problem</span>
          <h2 className="display h-lg" style={{marginTop:16, maxWidth:"16ch"}}>Your QR menu is a black hole.</h2>
          <p className="lead" style={{marginTop: 20}}>You printed it, put it on every table, watched people scan it. And then... nothing. No data. No insight. Just guesswork with years of experience on top.</p>
        </div>
      </div>
      <div className="problem-grid">
        <div className="problem-card" style={{"--c":"var(--brand-red)"}}>
          <div className="problem-icon"><Icon.eye /></div>
          <h3>No behavioral data</h3>
          <p>You have no idea which dishes are actually being looked at, for how long, or which ones get ignored entirely.</p>
        </div>
        <div className="problem-card" style={{"--c":"var(--brand-orange)"}}>
          <div className="problem-icon"><Icon.alert /></div>
          <h3>Decisions based on gut</h3>
          <p>Menu changes, pricing, and promotions are guesswork. You're flying blind every time you update the menu.</p>
        </div>
        <div className="problem-card" style={{"--c":"var(--brand-purple)"}}>
          <div className="problem-icon"><Icon.coin /></div>
          <h3>Lost revenue</h3>
          <p>Underperforming items stay on the menu. High-margin dishes go unnoticed. Money stays on the table.</p>
        </div>
      </div>
    </div>
  </section>
);

const HowItWorks = () => (
  <section id="how" className="tint-orange">
    <div className="wrap" style={{"--accent":"var(--brand-orange)"}}>
      <div className="section-head">
        <div>
          <span className="eyebrow" style={{color:"var(--brand-orange)"}}>How it works</span>
          <h2 className="display h-lg" style={{marginTop:16, maxWidth:"16ch"}}>Three simple steps.</h2>
        </div>
        <p className="lead">No app, no POS integration, no staff training. Replace the old sticker and you're live by lunch.</p>
      </div>
      <div className="steps">
        <div className="step">
          <span className="step-num" style={{color:"var(--brand-orange)"}}>01</span>
          <h3>Swap your QR</h3>
          <p>We send you a new QR code and host your menu. No app, no POS integration, no staff training. Replace the old sticker and you're live.</p>
          <div className="step-art" style={{background:"#fff5ef"}}>
            <svg viewBox="0 0 200 120" style={{width:"60%"}}>
              <rect x="60" y="10" width="80" height="100" rx="10" fill="#0f0f14"/>
              <rect x="68" y="18" width="64" height="64" rx="6" fill="#fff"/>
              <rect x="74" y="24" width="12" height="12" rx="2" fill="#0f0f14"/>
              <rect x="114" y="24" width="12" height="12" rx="2" fill="#0f0f14"/>
              <rect x="74" y="64" width="12" height="12" rx="2" fill="#0f0f14"/>
              <rect x="114" y="64" width="12" height="12" rx="2" fill="#f24e1e"/>
              <rect x="90" y="40" width="6" height="6" fill="#0f0f14"/>
              <rect x="100" y="40" width="6" height="6" fill="#0f0f14"/>
              <rect x="110" y="48" width="6" height="6" fill="#0f0f14"/>
              <rect x="90" y="56" width="6" height="6" fill="#0f0f14"/>
            </svg>
          </div>
        </div>
        <div className="step">
          <span className="step-num" style={{color:"var(--brand-orange)"}}>02</span>
          <h3>We watch silently</h3>
          <p>Every scan, every tap, every item view is tracked. We capture 10+ behavioral signals per session — anonymously and without changing how customers order.</p>
          <div className="step-art" style={{background:"#fff5ef"}}>
            <svg viewBox="0 0 200 120" style={{width:"80%"}}>
              <rect x="30" y="16" width="140" height="88" rx="10" fill="#fff" stroke="#e5e5ea"/>
              {[0,1,2,3].map(i=>(
                <g key={i} transform={`translate(44 ${30+i*16})`}>
                  <circle cx="0" cy="6" r="4" fill={["#0acf83","#1abcfe","#a259ff","#f24e1e"][i]}/>
                  <rect x="12" y="2" width="70" height="4" rx="2" fill="#e5e5ea"/>
                  <rect x="12" y="10" width={30 + i*8} height="3" rx="1.5" fill="#0f0f14" opacity="0.4"/>
                </g>
              ))}
            </svg>
          </div>
        </div>
        <div className="step">
          <span className="step-num" style={{color:"var(--brand-orange)"}}>03</span>
          <h3>You get clear insights</h3>
          <p>Every Monday, an AI-written report lands in your inbox with specific, plain-language recommendations — not charts you have to decode.</p>
          <div className="step-art" style={{background:"#fff5ef"}}>
            <svg viewBox="0 0 200 120" style={{width:"80%"}}>
              <rect x="20" y="14" width="160" height="92" rx="10" fill="#fff" stroke="#e5e5ea"/>
              <circle cx="36" cy="32" r="8" fill="#0acf83"/>
              <rect x="50" y="28" width="80" height="8" rx="2" fill="#0f0f14"/>
              <rect x="34" y="52" width="132" height="4" rx="2" fill="#e5e5ea"/>
              <rect x="34" y="62" width="110" height="4" rx="2" fill="#e5e5ea"/>
              <rect x="34" y="72" width="120" height="4" rx="2" fill="#e5e5ea"/>
              <rect x="34" y="86" width="50" height="14" rx="4" fill="#0acf83"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Mockup visuals for feature rows */
const MatrixMock = () => (
  <div className="dash">
    <div className="dash-chrome">
      <span className="dot" style={{background:"#ff7262"}}/><span className="dot" style={{background:"#f2c94c"}}/><span className="dot" style={{background:"#0acf83"}}/>
      <span className="url">app.scanalytics.io/pricing</span>
    </div>
    <div className="dash-body" style={{padding:24}}>
      <div style={{display:"flex", justifyContent:"space-between", marginBottom:14}}>
        <div style={{fontFamily:"var(--font-head)", fontSize:18, fontWeight:500, letterSpacing:-0.02}}>Menu engineering matrix</div>
        <Pill color="var(--brand-green)">live</Pill>
      </div>
      <div style={{position:"relative", aspectRatio:"1.2/1", background:"#fafafa", border:"1px solid var(--border)", borderRadius:12}}>
        <div style={{position:"absolute", inset:"14% 14% 14% 14%"}}>
          <div style={{position:"absolute", inset:0, display:"grid", gridTemplateColumns:"1fr 1fr", gridTemplateRows:"1fr 1fr"}}>
            <div style={{background:"color-mix(in srgb, var(--brand-orange) 12%, white)", borderRight:"1px dashed #d8d8de", borderBottom:"1px dashed #d8d8de"}}/>
            <div style={{background:"color-mix(in srgb, var(--brand-green) 12%, white)", borderBottom:"1px dashed #d8d8de"}}/>
            <div style={{background:"color-mix(in srgb, var(--brand-red) 12%, white)", borderRight:"1px dashed #d8d8de"}}/>
            <div style={{background:"color-mix(in srgb, var(--brand-blue) 12%, white)"}}/>
          </div>
          {/* dots */}
          {[
            {x:78, y:74, c:"var(--brand-green)"},
            {x:68, y:66, c:"var(--brand-green)"},
            {x:56, y:24, c:"var(--brand-blue)"},
            {x:72, y:30, c:"var(--brand-blue)"},
            {x:26, y:76, c:"var(--brand-orange)"},
            {x:32, y:68, c:"var(--brand-orange)"},
            {x:20, y:22, c:"var(--brand-red)"},
            {x:28, y:14, c:"var(--brand-red)"},
          ].map((d,i)=>(
            <div key={i} style={{position:"absolute", left:`${d.x}%`, bottom:`${d.y}%`, transform:"translate(-50%, 50%)", width:14, height:14, borderRadius:999, background:d.c, border:"2px solid #fff", boxShadow:"0 2px 6px rgba(0,0,0,0.12)"}}/>
          ))}
        </div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginTop:14, fontSize:12}}>
        {[["STAR","var(--brand-green)"],["PLOWHORSE","var(--brand-blue)"],["PUZZLE","var(--brand-orange)"],["DOG","var(--brand-red)"]].map(([l,c],i)=>(
          <div key={i} style={{display:"flex", gap:8, alignItems:"center", padding:"8px 10px", background:"var(--bg-alt)", borderRadius:8}}>
            <div style={{width:10, height:10, borderRadius:999, background:c}}/>
            <span style={{fontFamily:"var(--font-mono)", fontSize:11, fontWeight:600, color:c, letterSpacing:0.05}}>{l}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const ReportMock = () => (
  <div className="dash">
    <div className="dash-chrome">
      <span className="dot" style={{background:"#ff7262"}}/><span className="dot" style={{background:"#f2c94c"}}/><span className="dot" style={{background:"#0acf83"}}/>
      <span className="url">inbox / Weekly insight — Week of Jan 15</span>
    </div>
    <div className="dash-body" style={{padding:28}}>
      <div style={{display:"flex", alignItems:"center", gap:10, marginBottom:16}}>
        <div style={{width:28, height:28, borderRadius:8, background:"var(--brand-purple)", color:"#fff", display:"grid", placeItems:"center", fontWeight:700, fontSize:13}}>S</div>
        <div>
          <div style={{fontWeight:600, fontSize:14}}>Weekly insight — Week of Jan 15</div>
          <div style={{fontSize:12, color:"var(--text-muted)", fontFamily:"var(--font-mono)"}}>scanalytics.io · 2 min read</div>
        </div>
        <Pill color="var(--brand-purple)" style={{marginLeft:"auto"}}>AI generated</Pill>
      </div>
      <div style={{fontSize:14, lineHeight:1.6, color:"var(--text)"}}>
        <p style={{marginBottom:12}}>Good morning. Your <b>shawarma</b> gets 40% of views but half the orders of the <b>kafta</b> — the menu photo is likely the issue. Try swapping it.</p>
        <p style={{marginBottom:12}}>The <b>patatas bravas</b> are quietly pulling their weight: strong views, strong intent. Consider a small price bump.</p>
        <p style={{marginBottom:0}}>Peak traffic hit on Saturday at 2 PM. The kitchen should be ready 15 minutes before.</p>
      </div>
    </div>
  </div>
);

const MetricsMock = () => (
  <div className="dash">
    <div className="dash-chrome">
      <span className="dot" style={{background:"#ff7262"}}/><span className="dot" style={{background:"#f2c94c"}}/><span className="dot" style={{background:"#0acf83"}}/>
      <span className="url">app.scanalytics.io/analytics</span>
    </div>
    <div className="dash-body" style={{padding:20}}>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:12}}>
        {[
          {l:"Sessions", v:"342", d:"+12%", c:"var(--brand-green)"},
          {l:"Item views", v:"1,284", d:"+8%", c:"var(--brand-green)"},
          {l:"Avg dwell", v:"14s", d:"Good", c:"var(--brand-blue)"},
          {l:"Returns", v:"47", d:"+23%", c:"var(--brand-green)"},
        ].map((k,i)=>(
          <div key={i} style={{background:"#fff", border:"1px solid var(--border)", borderRadius:12, padding:"12px 14px"}}>
            <div style={{fontFamily:"var(--font-mono)", fontSize:10, color:"var(--text-muted)", textTransform:"uppercase", letterSpacing:0.05}}>{k.l}</div>
            <div style={{fontFamily:"var(--font-head)", fontSize:26, fontWeight:500, letterSpacing:-0.02, marginTop:6}}>{k.v}</div>
            <div style={{fontSize:11, color:k.c, fontWeight:500, marginTop:2}}>{k.d}</div>
          </div>
        ))}
      </div>
      <div style={{background:"#fff", border:"1px solid var(--border)", borderRadius:12, padding:14}}>
        <div style={{fontSize:12, fontWeight:600, marginBottom:10}}>Hourly heatmap</div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(18, 1fr)", gap:3}}>
          {Array.from({length:18}).map((_,i)=>{
            const peak = [6,7,8,14,15,16].includes(i) ? 0.9 : (Math.random()*0.4+0.1);
            return <div key={i} style={{aspectRatio:"1/1", borderRadius:3, background:`color-mix(in srgb, var(--brand-purple) ${Math.round(peak*100)}%, #eef0f4)`}}/>;
          })}
        </div>
      </div>
    </div>
  </div>
);

const Features = () => (
  <section id="features">
    <div className="wrap">
      <div className="section-head">
        <div>
          <span className="eyebrow" style={{color:"var(--brand-green)"}}>What you get</span>
          <h2 className="display h-lg" style={{marginTop:16, maxWidth:"20ch"}}>Real insight, not another dashboard.</h2>
        </div>
        <p className="lead">Three tabs. One answer per question. No charts to decode before lunch service.</p>
      </div>

      {/* F1 */}
      <div className="feature-row" style={{"--accent":"var(--brand-green)"}}>
        <div className="feature-copy">
          <span className="eyebrow" style={{color:"var(--brand-green)"}}>Menu engineering, automated</span>
          <h2 className="display h-md">Every dish, plotted. Every price, a lever.</h2>
          <p className="lead" style={{fontSize:18}}>We plot every dish on a 2x2 matrix — Stars, Plowhorses, Puzzles, Dogs — based on popularity and margin. Each item gets a specific recommendation: what to promote, what to reprice, what to remove.</p>
          <ul className="feature-bullets" style={{"--accent":"var(--brand-green)"}}>
            <li><span className="tick"><Icon.check/></span><div>Interactive matrix visualisation</div></li>
            <li><span className="tick"><Icon.check/></span><div>Per-item pricing guidance</div></li>
            <li><span className="tick"><Icon.check/></span><div>Editable food cost inputs</div></li>
            <li><span className="tick"><Icon.check/></span><div>Confidence indicators</div></li>
          </ul>
        </div>
        <div className="feature-art"><MatrixMock/></div>
      </div>

      {/* F2 */}
      <div className="feature-row reverse" style={{"--accent":"var(--brand-purple)"}}>
        <div className="feature-copy">
          <span className="eyebrow" style={{color:"var(--brand-purple)"}}>Weekly AI reports</span>
          <h2 className="display h-md">A Monday briefing that reads like a friend, not a spreadsheet.</h2>
          <p className="lead" style={{fontSize:18}}>Every Monday morning you get a plain-language report written specifically for your restaurant — not generic SaaS jargon. "Your shawarma gets 40% of views but half the orders of the kafta" — that kind of specific.</p>
          <ul className="feature-bullets" style={{"--accent":"var(--brand-purple)"}}>
            <li><span className="tick"><Icon.check/></span><div>Personalised to your menu</div></li>
            <li><span className="tick"><Icon.check/></span><div>Written in plain language</div></li>
            <li><span className="tick"><Icon.check/></span><div>Specific dish names and actions</div></li>
            <li><span className="tick"><Icon.check/></span><div>Available in English or Spanish</div></li>
          </ul>
        </div>
        <div className="feature-art"><ReportMock/></div>
      </div>

      {/* F3 */}
      <div className="feature-row" style={{"--accent":"var(--brand-blue)"}}>
        <div className="feature-copy">
          <span className="eyebrow" style={{color:"var(--brand-blue)"}}>Deep behavioral tracking</span>
          <h2 className="display h-md">The receipts, when you want to go deeper.</h2>
          <p className="lead" style={{fontSize:18}}>Every session is analyzed across 10+ dimensions: item views, dwell time, scroll depth, drop-off points, return visits, referral sources, device type, time of day, and co-viewed items for combo opportunities.</p>
          <ul className="feature-bullets" style={{"--accent":"var(--brand-blue)"}}>
            <li><span className="tick"><Icon.check/></span><div>Session-level and item-level metrics</div></li>
            <li><span className="tick"><Icon.check/></span><div>Heatmaps by hour and day</div></li>
            <li><span className="tick"><Icon.check/></span><div>Co-view analysis for combos</div></li>
            <li><span className="tick"><Icon.check/></span><div>Traffic source breakdown</div></li>
          </ul>
        </div>
        <div className="feature-art"><MetricsMock/></div>
      </div>
    </div>
  </section>
);

const Quote = () => (
  <section className="tint-purple">
    <div className="wrap">
      <div className="section-head" style={{flexDirection:"column", alignItems:"center", textAlign:"center"}}>
        <span className="eyebrow" style={{color:"var(--brand-purple)"}}>What restaurant owners say</span>
        <h2 className="display h-lg" style={{marginTop:16, maxWidth:"24ch", textAlign:"center"}}>Built with Madrid restaurants, for Madrid restaurants.</h2>
      </div>
      <div className="quote-card">
        <div className="quote-mark">"</div>
        <div className="quote-text">I put that QR on every table. After customers scan it? It's a black hole. My best analytics right now is watching people's faces from across the room. That's not a system — that's guesswork with 20 years of experience on top.</div>
        <div className="quote-attr">— Restaurant owner, pilot interview</div>
      </div>
    </div>
  </section>
);

const PricingSection = ({ navigate }) => (
  <section id="pricing">
    <div className="wrap">
      <div className="section-head" style={{flexDirection:"column", alignItems:"center", textAlign:"center", gap:16}}>
        <span className="eyebrow" style={{color:"var(--brand-green)"}}>Pricing</span>
        <h2 className="display h-lg" style={{maxWidth:"20ch", margin:"0 auto"}}>Simple tiers. Start free.</h2>
        <p className="lead" style={{textAlign:"center", margin:"0 auto"}}>Every restaurant starts with a free 1-month pilot on real data. No credit card needed. If it doesn't deliver, you walk away — and your QR keeps working.</p>
      </div>
      <div className="price-grid">
        <div className="price-card">
          <div className="price-name">Starter</div>
          <div className="price-desc">For cafés and small bars getting started with analytics.</div>
          <div className="price-val"><span className="num" style={{color:"var(--brand-blue)"}}>€29</span><span className="unit">/mo</span></div>
          <ul className="price-features">
            <li><span className="check"><Icon.check/></span>QR menu + basic tracking</li>
            <li><span className="check"><Icon.check/></span>Monthly summary report</li>
            <li><span className="check"><Icon.check/></span>Up to 500 scans/month</li>
            <li><span className="check"><Icon.check/></span>Email support</li>
          </ul>
          <div className="price-cta"><a href="#/signup" className="btn btn-secondary btn-lg" style={{borderColor:"var(--brand-blue)", color:"var(--brand-blue)"}} onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Start free</a></div>
        </div>

        <div className="price-card featured">
          <span className="price-badge">MOST POPULAR</span>
          <div className="price-name">Growth</div>
          <div className="price-desc">Full behavioral intelligence, for the week-in, week-out operator.</div>
          <div className="price-val"><span className="num" style={{color:"var(--brand-green)"}}>€79</span><span className="unit">/mo</span></div>
          <ul className="price-features">
            <li><span className="check"><Icon.check/></span><b>Everything in Starter, plus:</b></li>
            <li><span className="check"><Icon.check/></span>Full dashboard access</li>
            <li><span className="check"><Icon.check/></span>Weekly AI insights</li>
            <li><span className="check"><Icon.check/></span>Menu engineering matrix</li>
            <li><span className="check"><Icon.check/></span>Item-level heatmaps</li>
            <li><span className="check"><Icon.check/></span>Unlimited scans</li>
          </ul>
          <div className="price-cta"><a href="#/signup" className="btn btn-primary btn-lg" style={{background:"var(--brand-green)"}} onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Start free pilot</a></div>
        </div>

        <div className="price-card">
          <div className="price-name">Pro</div>
          <div className="price-desc">Multi-location groups with GMs, API needs, and a quarterly check-in.</div>
          <div className="price-val"><span className="num" style={{color:"var(--brand-purple)"}}>€149</span><span className="unit">/mo</span></div>
          <ul className="price-features">
            <li><span className="check"><Icon.check/></span><b>Everything in Growth, plus:</b></li>
            <li><span className="check"><Icon.check/></span>Multi-location support</li>
            <li><span className="check"><Icon.check/></span>Custom reports</li>
            <li><span className="check"><Icon.check/></span>API access</li>
            <li><span className="check"><Icon.check/></span>Priority support</li>
            <li><span className="check"><Icon.check/></span>In-person quarterly review</li>
          </ul>
          <div className="price-cta"><a href="#/signup" className="btn btn-secondary btn-lg" style={{borderColor:"var(--brand-purple)", color:"var(--brand-purple)"}} onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Talk to us</a></div>
        </div>
      </div>
    </div>
  </section>
);

const faqs = [
  { q: "What if I want to leave?", a: "Your menu URL stays alive. We guarantee continuity — if you churn, we redirect your QR to whatever URL you want, free of charge. Your printed QRs never become broken links." },
  { q: "Do I need to reprint my QR codes?", a: "Yes, once at setup. We know this is friction — which is why we cover the first print run free for pilot customers and send you pre-printed table cards." },
  { q: "Does this replace my POS?", a: "No. We don't handle orders or payments. Scanalytics is purely a behavioral analytics layer on top of your existing operations. You keep everything you already have." },
  { q: "Is customer data anonymous?", a: "Yes. We track behavior, not identity. No names, no emails, no logins from your customers. Fully GDPR-compliant and transparent." },
  { q: "What makes the pilot different from a demo?", a: "Real data, your menu, one month free. No fake numbers. At the end we sit down with you and walk through what we found." },
  { q: "Can I use it in Spanish?", a: "Yes. The entire dashboard, reports, and AI insights are available in both English and Spanish. Toggle any time." },
];

const FAQ = () => {
  const [open, setOpen] = useStateL(0);
  return (
    <section id="faq" className="tint-blue">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <span className="eyebrow" style={{color:"var(--brand-blue)"}}>FAQ</span>
            <h2 className="display h-lg" style={{marginTop:16, maxWidth:"14ch"}}>Common questions.</h2>
            <p className="lead" style={{marginTop:20, fontSize:17}}>
              Still wondering? Write us at <a href="mailto:hi@scanalytics.io" style={{color:"var(--brand-blue)", textDecoration:"underline", textDecorationThickness:1.5, textUnderlineOffset:3}}>hi@scanalytics.io</a> — a real person reads every note.
            </p>
          </div>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <details key={i} className={`faq-item ${open === i ? "open" : ""}`} open={open === i}>
                <summary className="faq-q" onClick={(e)=>{e.preventDefault(); setOpen(open === i ? -1 : i);}}>
                  <span>{f.q}</span>
                  <span className="faq-toggle">+</span>
                </summary>
                <div className="faq-a">{f.a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ navigate }) => (
  <section style={{paddingBottom:48}}>
    <div className="wrap">
      <div className="final-cta">
        <div className="deco a"/><div className="deco b"/><div className="deco c"/>
        <h2 className="display h-lg">Ready to see what your menu is actually doing?</h2>
        <p className="lead">Start a free 1-month pilot. Real data, your restaurant, no credit card.</p>
        <a href="#/signup" className="btn btn-lg" onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Start your pilot <Icon.arrow/></a>
      </div>
    </div>
  </section>
);

const SiteFoot = () => (
  <footer>
    <div className="wrap">
      <div className="foot-cols">
        <div className="foot-col">
          <Wordmark size={20} />
          <p className="foot-tag">Turn every QR scan into a business decision.</p>
        </div>
        <div className="foot-col">
          <h4>Product</h4>
          <ul><li><a href="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">FAQ</a></li></ul>
        </div>
        <div className="foot-col">
          <h4>Company</h4>
          <ul><li><a href="#">About</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul>
        </div>
        <div className="foot-col">
          <h4>Legal</h4>
          <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul>
        </div>
      </div>
      <div className="wrap foot-row" style={{paddingBottom:32, paddingTop:24, borderTop:"1px solid var(--border)", color:"var(--text-muted)", fontSize:14}}>
        <div>© 2026 Scanalytics · Madrid, Spain</div>
        <div className="foot-links">
          <a href="mailto:hi@scanalytics.io">hi@scanalytics.io</a>
        </div>
      </div>
    </div>
  </footer>
);

const Landing = ({ navigate }) => (
  <>
    <NavLanding navigate={navigate} />
    <Hero navigate={navigate} />
    <Problem />
    <HowItWorks />
    <Features />
    <Quote />
    <PricingSection navigate={navigate} />
    <FAQ />
    <FinalCTA navigate={navigate} />
    <SiteFoot />
  </>
);

Object.assign(window, { Landing });
