// All landing-page sections. Reads `copy` prop for bilingual strings.

const { Splotch, ScanIcon, SeedPacket, LeafIcon, HouseplantIcon, BarcodeIcon, DiagnoseIcon,
        PlanIcon, BellIcon, JournalIcon,
        Snowflake, Sprout2, Sun, FallLeaf,
        ShieldIcon, NoSellIcon, KeyIcon, TrashIcon,
        GooglePlayGlyph, AppleGlyph, VerifiedSeal } = window;

// Bilingual helper — picks one based on lang.
const T = ({ no, en, lang }) => <>{lang === 'no' ? no : en}</>;

// The app's signature "(AI)" mark — terracotta italic in a pill. Used to
// label any AI-generated value or assertion on the landing page, mirroring
// what users will see inside the app (e.g. "Full sol (AI)").
const AIMark = ({ children = 'AI' }) => (
  <span className="ai-mark">{children}</span>
);

// ── HERO ────────────────────────────────────────────────────────────
function Hero({ lang }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="section-marker">
              <span className="nr">Nr. 01</span>
              <span><T no="Plantepleie med nordisk dybde" en="Plant care with Nordic depth" lang={lang}/></span>
            </div>

            <h1 className="display">
              {lang === 'no' ? (
                <>
                  Skann<span className="punct">.</span>{' '}
                  Dyrk<span className="punct">.</span>{' '}
                  <em>Trives</em><span className="punct">.</span>
                </>
              ) : (
                <>
                  Scan<span className="punct">.</span>{' '}
                  Grow<span className="punct">.</span>{' '}
                  <em>Thrive</em><span className="punct">.</span>
                </>
              )}
              <span className="sub-en">Scan. Grow. Thrive.</span>
            </h1>

            <p className="lede">
              <T
                no={<>Skann en frøpose, en strekkode eller et blad — så bygger Seedling <AIMark/> en komplett dyrkingsplan, med din sone og sesong tatt med i beregningen. Fra frø til full blomst.</>}
                en={<>Scan a seed packet, a barcode or a leaf — and Seedling <AIMark/> builds a complete growing plan, with your zone and season factored in. From seed to full bloom.</>}
                lang={lang}/>
            </p>

            <div className="download-row">
              <a className="badge" href="#" aria-label="Google Play">
                <span className="coming-soon-tag">
                  <T no="Snart" en="Soon" lang={lang}/>
                </span>
                <span className="glyph"><GooglePlayGlyph/></span>
                <span className="lbl">
                  <span className="small"><T no="Kommer på" en="Get it on" lang={lang}/></span>
                  <span className="big">Google Play</span>
                </span>
              </a>
              <a className="badge secondary" href="#" aria-label="App Store">
                <span className="coming-soon-tag" style={{background:'var(--bark-light)'}}>
                  <T no="Senere" en="Later" lang={lang}/>
                </span>
                <span className="glyph"><AppleGlyph/></span>
                <span className="lbl">
                  <span className="small"><T no="Kommer på" en="Available on" lang={lang}/></span>
                  <span className="big">App Store</span>
                </span>
              </a>
            </div>
          </div>

          <div className="hero-art">
            <Splotch color="#7C9A7E" style={{ inset: '8% 12% auto auto', width: '70%', height: '70%' }}/>
            <Splotch color="#EFB740" style={{ inset: 'auto 4% 8% auto', width: '46%', height: '46%' }}/>
            <Splotch color="#C4622D" style={{ inset: '38% auto auto 4%', width: '36%', height: '36%' }}/>
            <img src="assets/sprout.png" alt="Watercolor sprout illustration"/>
          </div>
        </div>

        <div className="meta-strip">
          <div>
            <div className="meta-k"><T no="Tilgjengelig" en="Available" lang={lang}/></div>
            <div className="meta-v"><T no="Snart, 2026" en="Soon, 2026" lang={lang}/></div>
          </div>
          <div>
            <div className="meta-k"><T no="Først på" en="First on" lang={lang}/></div>
            <div className="meta-v">Android · iOS</div>
          </div>
          <div>
            <div className="meta-k"><T no="Språk" en="Languages" lang={lang}/></div>
            <div className="meta-v"><T no="6, flere kommer" en="6, more coming" lang={lang}/></div>
          </div>
          <div>
            <div className="meta-k"><T no="Pris" en="Price" lang={lang}/></div>
            <div className="meta-v"><T no="Gratis å begynne" en="Free to start" lang={lang}/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── TAGLINE STRIP ──────────────────────────────────────────────────
function TaglineStrip({ lang }) {
  return (
    <div className="tagline-strip">
      <T no="Fra frøpose til full blomst" en="From seed packet to full bloom" lang={lang}/>
      <span className="dot">✦</span>
      <T no="Bygget for nordiske hager" en="Built for Nordic gardens" lang={lang}/>
      <span className="dot">✦</span>
      <T no="Verifisert av dyrkere" en="Verified by growers" lang={lang}/>
    </div>
  );
}

// ── SCAN ───────────────────────────────────────────────────────────
function Scan({ lang, showPreview }) {
  const cards = [
    { ic: <SeedPacket/>, no:'Frøposer', en:'Seed packets',
      d_no:'Forsiden eller baksiden — Seedling leser sort, sone og sådato.',
      d_en:'Front or back — Seedling reads variety, zone and sowing dates.' },
    { ic: <DiagnoseIcon/>, no:'Diagnose (AI)', en:'Diagnosis (AI)',
      d_no:'Pek kameraet mot et sykt blad. Seedling vurderer hva som kan feile og foreslår tiltak.',
      d_en:'Point the camera at an ailing leaf. Seedling assesses what might be wrong and suggests what to do.' },
    { ic: <BarcodeIcon/>, no:'Strekkoder', en:'Barcodes',
      d_no:'Skann strekkoden på frøposen for å hente planen på sekunder, uten å fotografere pakken.',
      d_en:'Scan the packet barcode to pull up the plan in seconds, no photo needed.' },
  ];

  return (
    <section>
      <div className="wrap">
        <div className="section-marker">
          <span className="nr">Nr. 02</span>
          <span><T no="Hva du kan skanne" en="What you scan" lang={lang}/></span>
        </div>
        <h2 className="section-h" style={{marginTop:18, maxWidth:'14ch'}}>
          <T
            no={<>Skann <em>en frøpose</em>. Vi ordner resten.</>}
            en={<>Scan <em>a seed packet</em>. We'll handle the rest.</>}
            lang={lang}/>
          <span className="sub-en">Scan a seed packet. We'll handle the rest.</span>
        </h2>

        <div className="scan-hero">
          <div>
            <h3>
              <T no="Frøposen er der reisen starter."
                 en="The seed packet is where the journey begins."
                 lang={lang}/>
            </h3>
            <p style={{marginTop:14, color:'var(--ink-soft)', maxWidth:'42ch'}}>
              <T
                no="Pek kameraet mot frøposen. Seedling leser sort, sådato og plantedybde rett fra pakken — og kobler det med din herdighetssone og sesong."
                en="Point your camera at the seed packet. Seedling reads the variety, sowing date and planting depth straight from the pack — then matches it to your hardiness zone and season."
                lang={lang}/>
            </p>
            <div className="scan-flow">
              <span className="step"><span className="n">1</span><T no="Skann frøpose" en="Scan packet" lang={lang}/></span>
              <span className="arrow">→</span>
              <span className="step"><span className="n">2</span><T no="Vi kobler til din sone" en="We match your zone" lang={lang}/></span>
              <span className="arrow">→</span>
              <span className="step"><span className="n">3</span><T no="Få plan" en="Get your plan" lang={lang}/></span>
            </div>
          </div>

          <div style={{display:'flex', justifyContent:'flex-end', alignItems:'center', gap:18, position:'relative'}}>
            <ScannerFrame lang={lang}/>
          </div>
        </div>

        <div className="scan-grid">
          {cards.map((c,i)=>(
            <div key={i} className="card scan-card">
              <div className="ico">{c.ic}</div>
              <h4>{lang === 'no' ? c.no : c.en}</h4>
              <p>{lang === 'no' ? c.d_no : c.d_en}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Scanner result preview — features the real seed-packet illustration as
// the centerpiece, with a soft sage scan beam and a "found" result chip
// below. Tells the "scan this → get this" story in one frame.
function ScannerFrame({ lang }) {
  return (
    <div style={{
      position:'relative',
      width:'100%', maxWidth:380, aspectRatio:'4/5',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      padding:'12px 8px 0'
    }}>
      {/* soft watercolor halo behind packet */}
      <div style={{
        position:'absolute', inset:'8% 18% 28% 18%',
        background:'radial-gradient(circle at 50% 40%, hsl(140 25% 75% / 0.55) 0%, transparent 65%)',
        filter:'blur(20px)', zIndex:0
      }}/>
      <div style={{
        position:'absolute', inset:'auto 12% 24% auto', width:'30%', aspectRatio:'1',
        background:'radial-gradient(circle, hsl(42 80% 70% / 0.45) 0%, transparent 60%)',
        filter:'blur(18px)', zIndex:0
      }}/>

      {/* tilted seed packet */}
      <div style={{
        position:'relative', zIndex:1,
        width:'62%', transform:'rotate(-5deg)',
        filter:'drop-shadow(0 20px 28px rgba(70, 50, 25, 0.28))'
      }}>
        <img src="assets/seed-packet-lavendel.png" alt="Frøpose: Lavendel"
             style={{width:'100%', display:'block', borderRadius:'6px'}}/>

        {/* sage scan beam sliding across the packet */}
        <div style={{
          position:'absolute', left:'-6%', right:'-6%', top:'42%',
          height:'2px',
          background:'linear-gradient(90deg, transparent, var(--sage), transparent)',
          boxShadow:'0 0 16px var(--sage), 0 0 4px var(--sage)',
          opacity:0.85
        }}/>
        {/* faint horizontal lines suggesting scan grid */}
        <div style={{
          position:'absolute', inset:'10% 4% 14% 4%',
          background:'repeating-linear-gradient(0deg, transparent 0 11px, hsl(140 25% 60% / 0.10) 11px 12px)',
          pointerEvents:'none',
          borderRadius:'4px',
          mixBlendMode:'multiply'
        }}/>
      </div>

      {/* result chip — terracotta accent dot + species + zone confirm */}
      <div style={{
        position:'relative', zIndex:2,
        marginTop:24,
        background:'var(--paper)',
        border:'1px solid var(--rule)',
        borderRadius:16,
        padding:'14px 18px',
        display:'flex', alignItems:'center', gap:14,
        boxShadow:'0 10px 22px -14px rgba(60,40,15,0.25)',
        maxWidth:'92%'
      }}>
        <div style={{
          width:34, height:34, borderRadius:'50%',
          background:'var(--sage)', color:'var(--paper)',
          display:'flex', alignItems:'center', justifyContent:'center',
          flexShrink:0
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
               strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12l4 4 10-10"/>
          </svg>
        </div>
        <div style={{lineHeight:1.2, minWidth:0}}>
          <div style={{
            fontFamily:'Fraunces, serif', fontWeight:600, fontSize:15,
            color:'var(--ink)', fontStyle:'italic'
          }}>
            Lavandula angustifolia
          </div>
          <div style={{fontSize:12, color:'var(--ink-mute)', marginTop:2,
                       display:'flex', alignItems:'center', gap:8}}>
            <T no="Funnet · Sone H3" en="Found · Zone H3" lang={lang}/>
            <span style={{
              fontFamily:'Fraunces, serif', fontStyle:'italic', fontWeight:500,
              fontSize:10, padding:'1px 7px 2px',
              background:'var(--terracotta-light)', color:'var(--accent)',
              borderRadius:999, letterSpacing:'0.02em'
            }}>AI</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── INSIDE THE APP — phone strip showing real onboarding screens ───
function InsideApp({ lang }) {
  const screens = [
    { src: 'assets/onboarding-1.jpg',
      nm_no:'Velkommen', nm_en:'Welcome',
      d_no:'Et vakkert utgangspunkt — laget for å vare en hel sesong.',
      d_en:'A beautiful starting point — made to last a full season.' },
    { src: 'assets/onboarding-2.jpg',
      nm_no:'Skann frøposen', nm_en:'Scan the seed packet',
      d_no:'Pek kameraet. Få en plan tilpasset der du bor.',
      d_en:'Point the camera. Get a plan tailored to where you live.' },
    { src: 'assets/app-home.jpg',
      nm_no:'Plantebiblioteket', nm_en:'Your plant library',
      d_no:'Alle plantene dine på ett sted — oversiktlig, sortert og alltid med deg.',
      d_en:'Every plant you grow in one place — organised, sorted, always with you.' },
    { src: 'assets/onboarding-3.jpg',
      nm_no:'Hele sesongen', nm_en:'All season long',
      d_no:'Påminnelser, dagbok, milepæler. Lykkes med plantene dine.',
      d_en:'Reminders, journal, milestones. Succeed with your plants.' },
  ];

  return (
    <section>
      <div className="wrap">
        <div style={{display:'flex', alignItems:'baseline', gap:24, flexWrap:'wrap'}}>
          <h2 className="section-h" style={{maxWidth:'18ch'}}>
            <T
              no={<>Slik <em>ser</em> det ut.</>}
              en={<>Here's how it <em>looks</em>.</>}
              lang={lang}/>
            <span className="sub-en">Here's how it looks.</span>
          </h2>
          <p style={{color:'var(--ink-soft)', maxWidth:'34ch', fontSize:16}}>
            <T
              no="En kort tur gjennom appen — fra første skann til dyrkingsdetaljer."
              en="A short tour through the app — from your first scan to growing details."
              lang={lang}/>
          </p>
        </div>

        <div className="inside-app">
          {screens.map((s,i)=>(
            <div key={i} className="phone-col">
              <div className="app-phone">
                <div className="app-phone-screen">
                  <img src={s.src} alt=""/>
                </div>
              </div>
              <div className="app-caption">
                <div className="nm">{lang==='no' ? s.nm_no : s.nm_en}</div>
                <div className="desc">{lang==='no' ? s.d_no : s.d_en}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FEATURES (For every plant) ─────────────────────────────────────
function Features({ lang }) {
  return (
    <section>
      <div className="wrap">
        <div className="section-marker">
          <span className="nr">Nr. 03</span>
          <span><T no="For hver eneste plante" en="For every plant" lang={lang}/></span>
        </div>
        <h2 className="section-h" style={{marginTop:18, maxWidth:'18ch'}}>
          <T
            no={<>En plan som vokser <em>sammen med</em> plantene dine.</>}
            en={<>A plan that grows <em>with</em> your plants.</>}
            lang={lang}/>
          <span className="sub-en">A plan that grows with your plants.</span>
        </h2>

        <div className="features-grid">
          <div className="card feature-tall">
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <h3><T no="Dyrkingskalender" en="Growing calendar" lang={lang}/></h3>
              <span style={{fontFamily:'Fraunces, serif', fontStyle:'italic', color:'var(--ink-mute)', fontSize:14}}>
                <T no="måned for måned" en="month by month" lang={lang}/>
              </span>
            </div>
            <p><T
              no="Se forkultur, utplanting, blomstring og høsting på én linje — for hver plante i hagen din."
              en="See sowing, planting out, blooming and harvest on a single line — for every plant in your garden."
              lang={lang}/></p>

            <Calendar lang={lang}/>
          </div>

          <div className="features-side">
            <MiniFeature ic={<PlanIcon/>}
              t_no="Tilpasset pleieplan" t_en="Tailored care plan"
              d_no="Jord, sol, vann, gjødsling — justert for plante og sone, ikke generiske råd."
              d_en="Soil, sun, water, feeding — adjusted to plant and zone, not generic advice."
              lang={lang}/>
            <MiniFeature ic={<BellIcon/>}
              t_no="Smarte påminnelser" t_en="Smart reminders"
              d_no="Vi sender en knuff når noe trenger deg. Aldri spam."
              d_en="A nudge only when something needs you. Never spam."
              lang={lang}/>
            <MiniFeature ic={<JournalIcon/>}
              t_no="Plantedagbok" t_en="Plant journal"
              d_no="Bilder, notater og milepæler — én plante, én historie."
              d_en="Photos, notes and milestones — one plant, one story."
              lang={lang}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniFeature({ ic, t_no, t_en, d_no, d_en, lang }) {
  return (
    <div className="card feature-mini">
      <div className="ico">{ic}</div>
      <h4>{lang === 'no' ? t_no : t_en}</h4>
      <p>{lang === 'no' ? d_no : d_en}</p>
    </div>
  );
}

// Calendar visualization for 3 plants
function Calendar({ lang }) {
  const months_no = ['Ja','Fe','Ma','Ap','Mai','Ju','Jul','Au','Se','Ok','No','De'];
  const months_en = ['Ja','Fe','Ma','Ap','My','Jn','Jl','Au','Se','Oc','No','De'];
  const months = lang === 'no' ? months_no : months_en;

  const plants = [
    { name_no:'Lavendel', name_en:'Lavender', latin:'Lavandula angustifolia',
      rows: [
        { lbl_no:'Forkultur', lbl_en:'Sowing',  cells:[0,0,1,1,1,1,0,0,0,0,0,0], cls:'sow' },
        { lbl_no:'Blomstring', lbl_en:'Bloom',  cells:[0,0,0,0,0,1,1,1,1,0,0,0], cls:'bloom' },
      ]
    },
    { name_no:'Solsikke', name_en:'Sunflower', latin:'Helianthus annuus',
      rows: [
        { lbl_no:'Forkultur', lbl_en:'Sowing',  cells:[0,0,0,1,1,0,0,0,0,0,0,0], cls:'sow' },
        { lbl_no:'Blomstring', lbl_en:'Bloom',  cells:[0,0,0,0,0,0,1,1,1,1,0,0], cls:'bloom' },
        { lbl_no:'Høsting', lbl_en:'Harvest',   cells:[0,0,0,0,0,0,0,0,1,1,0,0], cls:'harvest' },
      ]
    },
  ];

  return (
    <div className="cal">
      {plants.map((p,pi)=>(
        <div key={pi} style={{marginTop: pi===0?0:22}}>
          <div className="cal-header">
            <span>{lang==='no' ? p.name_no : p.name_en}</span>
            <span className="plant">{p.latin}</span>
          </div>
          <div className="cal-months">
            {months.map((m,i)=><span key={i}>{m}</span>)}
          </div>
          {p.rows.map((r,ri)=>(
            <div key={ri} className="cal-row">
              <div className="lbl">{lang==='no' ? r.lbl_no : r.lbl_en}</div>
              <div className="cal-cells">
                {r.cells.map((c,i)=>(
                  <div key={i} className={`cal-cell ${c ? r.cls : ''}`}/>
                ))}
              </div>
            </div>
          ))}
        </div>
      ))}
      <div className="cal-legend">
        <span><i style={{background:'var(--sage)'}}/><T no="Forkultur" en="Sowing" lang={lang}/></span>
        <span><i style={{background:'var(--sunflower)'}}/><T no="Blomstring" en="Bloom" lang={lang}/></span>
        <span><i style={{background:'var(--terracotta)'}}/><T no="Høsting" en="Harvest" lang={lang}/></span>
      </div>
    </div>
  );
}

// ── NORDIC ─────────────────────────────────────────────────────────
function Nordic({ lang }) {
  return (
    <section className="nordic-section">
      <div className="wrap">
        <div className="section-marker">
          <span className="nr">Nr. 04</span>
          <span><T no="Bygget for Norden. Klar for verden." en="Built for the Nordics. Ready for the world." lang={lang}/></span>
        </div>
        <h2 className="section-h" style={{marginTop:18, maxWidth:'18ch'}}>
          <T
            no={<>Lyse netter, korte sesonger, <em>ekte</em> nordisk klima.</>}
            en={<>Bright nights, short seasons, <em>real</em> Nordic climate.</>}
            lang={lang}/>
          <span className="sub-en">Bright nights, short seasons, real Nordic climate.</span>
        </h2>
        <p style={{color:'var(--ink-soft)', maxWidth:'52ch', marginTop:18, fontSize:17}}>
          <T
            no="Vår dypeste kunnskap er nordisk klima — men herdighetssoner og dyrkings­kalendere fungerer uansett hvor du planter. En app som faktisk forstår forskjellen på Trøndelag og Toscana."
            en="Our deepest knowledge is Nordic climate — but hardiness zones and growing calendars work wherever you plant. An app that actually understands the difference between Trøndelag and Tuscany."
            lang={lang}/>
        </p>

        <div className="nordic-grid">
          <div className="card nordic-card">
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
              <h3 style={{fontFamily:'Fraunces, serif', fontSize:24, fontWeight:600}}>
                <T no="Herdighetssoner" en="Hardiness zones" lang={lang}/>
              </h3>
              <span style={{fontSize:13, color:'var(--ink-mute)', fontStyle:'italic', fontFamily:'Fraunces, serif'}}>H1–H8</span>
            </div>
            <p style={{color:'var(--ink-soft)', marginTop:8, fontSize:15}}>
              <T no="Vi bruker den offisielle norske skalaen, H1 (mildest) til H8 (hardest). Velg din sone én gang — så vet Seedling hvilke planter som tåler vinteren i din sone."
                 en="We use the official Norwegian scale, H1 (mildest) to H8 (toughest). Pick your zone once — and Seedling knows which plants can handle winter in your zone."
                 lang={lang}/>
            </p>
            <div className="zones">
              {[
                {z:'H1', p_no:'Ytre Oslofjord og Sørlandskysten', p_en:'Outer Oslo fjord and southern coast', sw:'hsl(140 30% 70%)'},
                {z:'H3', p_no:'Indre Østland og milde kyststrøk', p_en:'Inland east and mild coastal areas', sw:'hsl(140 25% 58%)'},
                {z:'H5', p_no:'Trøndelag og innland', p_en:'Trøndelag and inland', sw:'hsl(42 70% 58%)'},
                {z:'H7', p_no:'Indre Troms og fjellbygder', p_en:'Inner Troms and mountain villages', sw:'hsl(20 65% 52%)'},
                {z:'H8', p_no:'Høyfjell og indre Finnmark', p_en:'High mountains and inner Finnmark', sw:'hsl(200 45% 55%)'},
              ].map((r,i)=>(
                <div key={i} className="zone-row">
                  <div className="zone-tag">
                    <span className="zone-swatch" style={{background:r.sw}}/>
                    {r.z}
                  </div>
                  <div className="place">{lang === 'no' ? r.p_no : r.p_en}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card nordic-card">
            <h3 style={{fontFamily:'Fraunces, serif', fontSize:24, fontWeight:600}}>
              <T no="Sesongene følger deg" en="Seasons follow you" lang={lang}/>
            </h3>
            <p style={{color:'var(--ink-soft)', marginTop:8, fontSize:15}}>
              <T no="Lyse netter om sommeren. Mørke vintre. Alt regnet inn i planen."
                 en="Long bright summers. Dark winters. Everything factored into your plan."
                 lang={lang}/>
            </p>
            <div className="seasons">
              {[
                {ic:<Sprout2/>, n_no:'Vår', n_en:'Spring', m:'Mar–May'},
                {ic:<Sun/>, n_no:'Sommer', n_en:'Summer', m:'Jun–Aug'},
                {ic:<FallLeaf/>, n_no:'Høst', n_en:'Autumn', m:'Sep–Oct'},
                {ic:<Snowflake/>, n_no:'Vinter', n_en:'Winter', m:'Nov–Feb'},
              ].map((s,i)=>(
                <div key={i} className="season">
                  <div className="ic">{s.ic}</div>
                  <div className="nm">{lang === 'no' ? s.n_no : s.n_en}</div>
                  <div className="mo">{s.m}</div>
                </div>
              ))}
            </div>

            <h3 style={{fontFamily:'Fraunces, serif', fontSize:24, fontWeight:600, marginTop:36}}>
              <T no="Seks språk fra start" en="Six languages from day one" lang={lang}/>
            </h3>
            <p style={{color:'var(--ink-soft)', marginTop:8, fontSize:15}}>
              <T no="Hele appen — fra plantenavn til pleienotater — på ditt morsmål."
                 en="The whole app — from plant names to care notes — in your mother tongue."
                 lang={lang}/>
            </p>
            <div className="lang-grid">
              {[
                {c:'NO', n:'Norsk', primary:true},
                {c:'SV', n:'Svenska'},
                {c:'DA', n:'Dansk'},
                {c:'FI', n:'Suomi'},
                {c:'IS', n:'Íslenska'},
                {c:'EN', n:'English'},
              ].map(l=>(
                <div key={l.c} className={`lang-pill ${l.primary?'primary':''}`}>
                  <span className="code">{l.c}</span>
                  <span className="name">{l.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── VERIFIED ───────────────────────────────────────────────────────
function Verified({ lang }) {
  return (
    <section>
      <div className="wrap">
        <div className="section-marker">
          <span className="nr">Nr. 05</span>
          <span><T no="Kvalitet, verifisert" en="Quality, verified" lang={lang}/></span>
        </div>
        <div className="verified-grid">
          <div className="seal-wrap">
            <div className="seal">
              <VerifiedSeal/>
            </div>
          </div>
          <div>
            <h2 className="section-h" style={{maxWidth:'15ch'}}>
              <T
                no={<>Gullstempelet betyr at <em>dyrkere har bekreftet</em> kalenderen.</>}
                en={<>The gold stamp means <em>growers have confirmed</em> the calendar.</>}
                lang={lang}/>
              <span className="sub-en">The gold stamp means growers have confirmed the calendar.</span>
            </h2>

            <div className="verified-points">
              <div className="vp">
                <div>
                  <h4><T no="Riktige planter, ikke flest" en="The right plants, not the most" lang={lang}/></h4>
                  <p><T
                    no="Du finner plantene du faktisk dyrker i Norden — uten å lete deg gjennom tusenvis du aldri kommer til å så."
                    en="You find the plants you'll actually grow in the Nordics — without digging through thousands you'll never sow."
                    lang={lang}/></p>
                </div>
              </div>
              <div className="vp">
                <div>
                  <h4><T no="Bekreftet av dyrkere" en="Confirmed by growers" lang={lang}/></h4>
                  <p><T
                    no="Når nok nordiske dyrkere bekrefter kalenderen i sin sone, får planten et gullstempel. Bygget av fellesskapet, sone for sone."
                    en="When enough Nordic growers confirm the calendar in their zone, the plant earns a gold stamp. Built by the community, zone by zone."
                    lang={lang}/></p>
                </div>
              </div>
              <div className="vp">
                <div>
                  <h4><T no="Tillit du kan se" en="Trust you can see" lang={lang}/></h4>
                  <p><T
                    no="Et gullstempel forteller deg at kalenderen for denne planten er bekreftet av dyrkere i ditt klima — ikke bare generert, men prøvd ut."
                    en="A gold stamp tells you the calendar for this plant has been confirmed by growers in your climate — not just generated, but proven in practice."
                    lang={lang}/></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── DATA ───────────────────────────────────────────────────────────
function Data({ lang }) {
  const items = [
    { ic:<ShieldIcon/>, t_no:'Lagret i EU', t_en:'Stored in the EU',
      d_no:'Hele kontoen din ligger i Frankfurt. Underlagt GDPR, ingen overføringer ut.',
      d_en:'Your entire account lives in Frankfurt. Under GDPR, no outbound transfers.' },
    { ic:<NoSellIcon/>, t_no:'Aldri solgt', t_en:'Never sold',
      d_no:'Vi tjener på abonnement, ikke data. Plantedagboken din er ikke til salgs.',
      d_en:'We make money on subscriptions, not data. Your plant journal isn\'t for sale.' },
    { ic:<KeyIcon/>, t_no:'Logg inn enkelt', t_en:'Sign in simply',
      d_no:'Google eller Apple. Ingen nye passord, ingen e-postlister.',
      d_en:'Google or Apple. No new passwords, no marketing lists.' },
    { ic:<TrashIcon/>, t_no:'Slett alt, når som helst', t_en:'Delete everything, anytime',
      d_no:'Ett trykk fjerner kontoen, plantene og bildene. Permanent, samme dag.',
      d_en:'One tap removes the account, plants and photos. Permanent, same day.' },
  ];

  return (
    <section className="data-section">
      <div className="wrap">
        <div className="section-marker">
          <span className="nr">Nr. 06</span>
          <span><T no="Dine data, ditt eierskap" en="Your data, your ownership" lang={lang}/></span>
        </div>
        <h2 className="section-h" style={{marginTop:18, maxWidth:'18ch'}}>
          <T
            no={<>Plantene er <em>dine</em>. Det samme er dataene om dem.</>}
            en={<>The plants are <em>yours</em>. So is the data about them.</>}
            lang={lang}/>
          <span className="sub-en">The plants are yours. So is the data about them.</span>
        </h2>
        <div className="data-grid">
          {items.map((it,i)=>(
            <div key={i} className="data-card">
              <div className="ico">{it.ic}</div>
              <h4>{lang === 'no' ? it.t_no : it.t_en}</h4>
              <p>{lang === 'no' ? it.d_no : it.d_en}</p>
            </div>
          ))}
        </div>
        <p className="data-footnote">
          <T
            no={<>Dyrkingsdata leses fra frøposen din. Artsbakgrunn suppleres fra åpne botaniske registre. Pleieråd genereres av en språkmodell og merkes tydelig med <AIMark>AI</AIMark> — alltid mulig å verifisere før du følger dem.</>}
            en={<>Growing data is read from your seed packet. Species background is supplemented from open botanical registries. Care advice is generated by a language model and clearly marked <AIMark>AI</AIMark> — always verifiable before you follow it.</>}
            lang={lang}/>
        </p>
      </div>
    </section>
  );
}

// ── FOOTER ─────────────────────────────────────────────────────────
function Footer({ lang }) {
  return (
    <footer>
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="logo" style={{fontSize:28}}>
              <img src="assets/sprout.png" className="logo-mark" alt=""/>
              Seedling
            </div>
            <p style={{marginTop:18, color:'var(--ink-soft)', fontSize:14, maxWidth:'32ch', lineHeight:1.55}}>
              <T
                no="Skann en frøpose. Få en plan. Se den blomstre — fra Tromsø til Toscana."
                en="Scan a seed packet. Get a plan. Watch it bloom — from Tromsø to Tuscany."
                lang={lang}/>
            </p>
          </div>

          <div>
            <div className="footer-h"><T no="Juridisk" en="Legal" lang={lang}/></div>
            <div className="footer-list">
              <a href="privacy.html"><T no="Personvern" en="Privacy" lang={lang}/></a>
              <a href="terms.html"><T no="Vilkår" en="Terms" lang={lang}/></a>
              <a href="delete.html"><T no="Slett konto" en="Delete account" lang={lang}/></a>
              <a href="ai.html"><T no="AI-transparens" en="AI transparency" lang={lang}/></a>
            </div>
          </div>

          <div>
            <div className="footer-h"><T no="Hjelp" en="Help" lang={lang}/></div>
            <div className="footer-list">
              <a href="support.html">Support</a>
              <a href="support.html#kontakt"><T no="Kontakt" en="Contact" lang={lang}/></a>
              <a href="support.html#ofte-stilte"><T no="Ofte stilte spørsmål" en="FAQ" lang={lang}/></a>
              <a href="support.html#kjente-feil"><T no="Status" en="Status" lang={lang}/></a>
            </div>
          </div>
        </div>

        <div className="footer-credit">
          <div>
            <T
              no={<>Utviklet av <em>Kviist Studio</em> i samarbeid med <em>Thrives</em>.</>}
              en={<>Developed by <em>Kviist Studio</em> in collaboration with <em>Thrives</em>.</>}
              lang={lang}/>
          </div>
          <div>© 2026 Seedling. <T no="Med kjærlighet til hagen." en="With love for the garden." lang={lang}/></div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, Scan, Features, Nordic, Verified, Data, Footer, TaglineStrip, InsideApp, AIMark
});