// Landing.jsx — Mia Cascina landing page sections

const KZ = {
  amber: '#C8841A',
  amberDark: '#A86E13',
  olive: '#6B7F47',
  beige: '#F5EDD5',
  beigeDeep: '#EDE2C2',
  sand: '#D4C5A9',
  text: '#2D2D2D',
  brown: '#5C3D0A',
  error: '#E85D3A',
  white: '#FFFFFF',
  paper: '#FBF6E6'
};
const FFD = "'Lora', Georgia, serif";
const FFB = "'Nunito', sans-serif";

// ────────── Shared bits ──────────
function Container({ children, style, max = 1180 }) {
  return <div style={{ maxWidth: max, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

function Overline({ children, color = KZ.amber }) {
  return <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 12, letterSpacing: 1.5, color, textTransform: 'uppercase' }}>{children}</div>;
}

function Display({ children, size = 56, color = KZ.brown, style }) {
  return <h2 style={{ fontFamily: FFD, fontWeight: 700, fontSize: size, lineHeight: 1.05, color, margin: 0, letterSpacing: '-0.02em', ...style }}>{children}</h2>;
}

function PillButton({ children, variant = 'primary', onClick, color, large, style }) {
  const isOutlined = variant === 'outlined';
  const stroke = color === 'olive' ? KZ.olive : KZ.amber;
  const h = large ? 56 : 48;
  const px = large ? 32 : 26;
  const fs = large ? 16 : 15;
  let s;
  if (isOutlined) s = { background: 'transparent', color: stroke, border: `1.5px solid ${stroke}` };else
  if (variant === 'ghost') s = { background: 'transparent', color: KZ.brown, border: `1.5px solid ${KZ.sand}` };else
  s = { background: KZ.amber, color: KZ.white, border: '1.5px solid ' + KZ.amber };
  return (
    <button onClick={onClick} style={{
      height: h, padding: `0 ${px}px`, borderRadius: 28,
      fontFamily: FFB, fontWeight: 700, fontSize: fs,
      cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
      transition: 'transform 120ms, background 120ms, border-color 120ms',
      ...s, ...style
    }}
    onMouseEnter={(e) => {if (variant === 'primary') e.currentTarget.style.background = KZ.amberDark;if (variant === 'outlined') e.currentTarget.style.background = 'rgba(200,132,26,0.08)';}}
    onMouseLeave={(e) => {if (variant === 'primary') e.currentTarget.style.background = KZ.amber;if (variant === 'outlined') e.currentTarget.style.background = 'transparent';}}>
      {children}</button>);

}

// ────────── NAV ──────────
function Nav({ onCta }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(245,237,213,0.92)',
      backdropFilter: 'blur(8px)',
      borderBottom: `1px solid ${KZ.sand}`
    }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
        <MiaCascinaLogo size={42} color={KZ.brown} primary={KZ.amber} secondary={KZ.olive} />

        <nav className="kz-nav" style={{ display: 'flex', gap: 24, fontFamily: FFB, fontSize: 14, fontWeight: 600, color: KZ.text }}>
          <a href="#cosa-fa" style={{ color: 'inherit', textDecoration: 'none' }}>Cosa fa</a>
          <a href="#prodotti" style={{ color: 'inherit', textDecoration: 'none' }}>Prodotti</a>
          <a href="#brand" style={{ color: 'inherit', textDecoration: 'none' }}>Personalizza</a>
          <a href="#prezzi" style={{ color: 'inherit', textDecoration: 'none' }}>Prezzi</a>
          <a href="#contatti" style={{ color: 'inherit', textDecoration: 'none' }}>Contatti</a>
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
          <PillButton onClick={onCta} style={{ whiteSpace: 'nowrap' }}>Richiedi demo</PillButton>
        </div>
      </Container>
    </header>);

}

// ────────── HERO A — Bottega: phone left, copy right ──────────
function HeroA({ onCta }) {
  return (
    <section style={{ background: KZ.beige, padding: '80px 0 100px', position: 'relative', overflow: 'hidden' }}>
      {/* decorative dots */}
      <div style={{ position: 'absolute', top: 60, right: -40, width: 280, height: 280, borderRadius: '50%', background: 'rgba(200,132,26,0.08)' }} />
      <div style={{ position: 'absolute', bottom: -80, left: -60, width: 220, height: 220, borderRadius: '50%', background: 'rgba(107,127,71,0.08)' }} />

      <Container style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 20, background: 'rgba(107,127,71,0.12)', border: '1px solid rgba(107,127,71,0.30)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: KZ.olive }} />
            <span style={{ fontFamily: FFB, fontSize: 12, fontWeight: 700, color: KZ.olive, letterSpacing: 0.5 }}>Per piccole aziende agricole</span>
          </div>
          <Display size={68} style={{ marginTop: 24 }}>La tua cascina,<br />nel telefono dei tuoi clienti.</Display>
          <p style={{ fontFamily: FFB, fontSize: 19, lineHeight: 1.5, color: KZ.text, marginTop: 24, maxWidth: 520 }}>
            Mia Cascina è l'app pronta all'uso che ti permette di gestire prenotazioni, ritiri e vendita diretta dei tuoi prodotti — uova, miele, olio, latte e tutto quello che fai tu.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
            <PillButton large onClick={onCta}>Richiedi una demo →</PillButton>
            <PillButton large variant="ghost" onClick={() => document.getElementById('cosa-fa')?.scrollIntoView({ behavior: 'smooth' })}>Scopri come funziona</PillButton>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px 28px', marginTop: 40, fontFamily: FFB, fontSize: 13, color: KZ.text }}>
            {[
            ['🥚', 'Pronta in 2 settimane'],
            ['🎨', 'Personalizzata sul tuo brand'],
            ['📞', 'Supporto in italiano']].
            map(([e, t]) =>
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 18 }}>{e}</span><span style={{ fontWeight: 600 }}>{t}</span>
              </div>
            )}
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <div style={{ transform: 'rotate(-4deg)', position: 'absolute', left: '8%', top: 40, opacity: 0.65, zIndex: 1 }}>
            <PhoneMock screen="shop" accent={KZ.olive} />
          </div>
          <div style={{ transform: 'rotate(3deg)', position: 'relative', zIndex: 2 }}>
            <PhoneMock screen="home" />
          </div>
        </div>
      </Container>
    </section>);

}

// ────────── HERO B — Editoriale: huge type, single phone ──────────
function HeroB({ onCta }) {
  return (
    <section style={{ background: KZ.beige, padding: '64px 0 80px', position: 'relative', overflow: 'hidden' }}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 32 }}>
          <Overline>Edizione N° 01 — Maggio 2026</Overline>
          <div style={{ height: 1, flex: 1, margin: '0 24px', background: KZ.sand }} />
          <div style={{ fontFamily: FFB, fontSize: 12, color: KZ.text, fontWeight: 600, letterSpacing: 0.5 }}>Per i contadini d'Italia</div>
        </div>

        <Display size={140} style={{ fontStyle: 'italic', lineHeight: 0.95, marginTop: 20, fontSize: 'clamp(72px, 14vw, 140px)' }}>
          Vendi <span style={{ color: KZ.amber, fontStyle: 'normal' }}>direttamente.</span>
        </Display>
        <Display size={140} style={{ lineHeight: 0.95, marginTop: 8, textAlign: 'right', fontSize: 'clamp(72px, 14vw, 140px)' }}>
          Senza intermediari.
        </Display>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px 1fr', gap: 48, marginTop: 60, alignItems: 'start' }}>
          <div>
            <p style={{ fontFamily: FFD, fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: KZ.brown, margin: 0 }}>
              "Un'app fatta apposta per chi conosce ogni gallina per nome — e ogni cliente per cognome."
            </p>
            <div style={{ marginTop: 24, paddingTop: 24, borderTop: `1px solid ${KZ.sand}`, fontFamily: FFB, fontSize: 14, lineHeight: 1.6, color: KZ.text }}>
              Mia Cascina nasce dall'app reale di una cascina italiana. La adattiamo al tuo brand, ai tuoi prodotti, al tuo modo di lavorare. Niente template generici. Niente abbonamenti astronomici.
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneMock screen="home" />
          </div>
          <div>
            <Overline>Cosa fa</Overline>
            <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', fontFamily: FFB, fontSize: 14, color: KZ.text, lineHeight: 2 }}>
              <li>→ Prenotazioni con calendario</li>
              <li>→ Ritiri nei tuoi punti</li>
              <li>→ Vetrina prodotti multipla</li>
              <li>→ Pagamenti integrati</li>
              <li>→ Notifiche ai clienti</li>
              <li>→ Pannello admin con PIN</li>
            </ul>
            <div style={{ marginTop: 28 }}>
              <PillButton large onClick={onCta}>Richiedi una demo →</PillButton>
            </div>
          </div>
        </div>
      </Container>
    </section>);

}

// ────────── HERO C — Vetrina: 3 phones row ──────────
function HeroC({ onCta }) {
  return (
    <section style={{ background: KZ.beige, padding: '80px 0 80px', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ textAlign: 'center' }}>
        <Overline>Mia Cascina · l'app per la tua cascina</Overline>
        <Display size={84} style={{ marginTop: 20, maxWidth: 900, marginLeft: 'auto', marginRight: 'auto' }}>
          Un'app per la tua azienda agricola.<br />
          <span style={{ color: KZ.amber }}>Pronta. Personalizzata. Tua.</span>
        </Display>
        <p style={{ fontFamily: FFB, fontSize: 18, lineHeight: 1.5, color: KZ.text, marginTop: 24, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
          Prenotazioni, vendita diretta, pagamenti: la tua cascina a portata di mano.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, justifyContent: 'center' }}>
          <PillButton large onClick={onCta}>Richiedi una demo →</PillButton>
          <PillButton large variant="outlined">Vedi un esempio reale</PillButton>
        </div>

        <div style={{
          marginTop: 80, display: 'flex', justifyContent: 'center', gap: 40,
          alignItems: 'center', position: 'relative'
        }}>
          <div style={{ transform: 'translateY(20px) rotate(-6deg)' }}>
            <PhoneMock screen="shop" accent={KZ.olive} secondary={KZ.amber} />
          </div>
          <div style={{ transform: 'scale(1.05)', zIndex: 2 }}>
            <PhoneMock screen="home" />
          </div>
          <div style={{ transform: 'translateY(20px) rotate(6deg)' }}>
            <PhoneMock screen="pay" accent="#8B4513" secondary={KZ.amber} />
          </div>
        </div>
      </Container>
    </section>);

}

// ────────── COSA FA ──────────
function CosaFa() {
  const items = [
  { icon: '📅', title: 'Prenotazioni semplici', body: 'I tuoi clienti scelgono data, quantità e punto di ritiro in 30 secondi. Senza chiamate, senza messaggi che poi si perdono.' },
  { icon: '📍', title: 'Punti di ritiro multipli', body: 'Imposti tu i luoghi e gli orari per la consegna. Può essere la tua azienda, il mercato del sabato o un punto di incontro comodo per te e il tuo cliente.' },
  { icon: '🔔', title: 'Notifiche automatiche', body: 'Confermi tu ogni prenotazione con un semplice tocco. Il cliente riceve la notifica sul telefono.' },
  { icon: '📊', title: 'Niente tecnicismi', body: 'Gestisci giacenze, prezzi, messaggi e analizzi le statistiche da una piattaforma semplice ed essenziale, pensata per chi non è un informatico.' },
  { icon: '🥚', title: 'Vetrina prodotti', body: 'Non solo uova. Aggiungi miele, olio, latte, formaggi, ortaggi. Ogni prodotto con la sua scheda e le sue quantità.' },
  { icon: '💳', title: 'Pagamenti integrati', body: 'Il cliente paga direttamente in app. Tu ricevi il bonifico, senza inseguire nessuno.' }];

  return (
    <section id="cosa-fa" style={{ background: KZ.paper, padding: '120px 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start', marginBottom: 64 }}>
          <div>
            <Overline>Cosa fa l'app</Overline>
            <Display size={56} style={{ marginTop: 16 }}>Tutto quello che serve.<br />Niente di più.</Display>
          </div>
          <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, color: KZ.text, paddingTop: 20 }}>
            Le funzioni essenziali per gestire la vendita diretta della tua azienda agricola, studiate assieme a piccole realtà come la tua. Nata per facilitarti il lavoro — non per aggiungerti altri pensieri.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((it) =>
          <div key={it.title} style={{
            background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16,
            padding: 28, display: 'flex', flexDirection: 'column', gap: 12
          }}>
              <div style={{
              width: 56, height: 56, borderRadius: 14,
              background: KZ.beige, display: 'grid', placeItems: 'center', fontSize: 28
            }}>{it.icon}</div>
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 22, color: KZ.brown, marginTop: 4, marginBottom: 12, lineHeight: 1.2 }}>{it.title}</div>
              <p style={{ fontFamily: FFB, fontSize: 14, lineHeight: 1.55, color: KZ.text, margin: 0 }}>{it.body}</p>
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ────────── PRODOTTI EXTRA ──────────
function Prodotti() {
  const products = [
  { emoji: '🥚', name: 'Uova', meta: 'confezioni · cartoni' },
  { emoji: '🍯', name: 'Miele', meta: 'vasetti · pezzature' },
  { emoji: '🫒', name: 'Olio EVO', meta: 'bottiglie · lattine' },
  { emoji: '🥛', name: 'Latte', meta: 'bottiglie · litri' },
  { emoji: '🧀', name: 'Formaggi', meta: 'forme · stagionatura' },
  { emoji: '🍷', name: 'Vino', meta: 'bottiglie · bag in box' },
  { emoji: '🥬', name: 'Ortaggi', meta: 'cassette miste' },
  { emoji: '🍅', name: 'Conserve', meta: 'vasetti · confetture' }];

  return (
    <section id="prodotti" style={{ background: KZ.beige, padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Overline>Non solo uova</Overline>
            <Display size={64} style={{ marginTop: 16 }}>Tutto ciò che fai tu,<br />nella stessa app.</Display>
            <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, color: KZ.text, marginTop: 24, maxWidth: 520 }}>
              Mia Cascina gestisce qualsiasi prodotto della tua azienda con la sua giacenza, la sua scheda, il suo prezzo. Aggiungerne uno richiede un minuto. Stagionali e produzioni speciali compresi.
            </p>
            <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 14, padding: 16, background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16 }}>
              <span style={{ fontSize: 28 }}>💳</span>
              <div>
                <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 18, color: KZ.brown }}>Pagamenti opzionali</div>
                <div style={{ fontFamily: FFB, fontSize: 13, color: KZ.text, marginTop: 2 }}>Stripe / SumUp integrati. Oppure pagamento al ritiro, come hai sempre fatto.</div>
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {products.map((p, i) =>
            <div key={p.name} style={{
              background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16,
              padding: 18, display: 'flex', alignItems: 'center', gap: 12,
              transform: i % 2 === 0 ? 'translateY(0)' : 'translateY(20px)'
            }}>
                <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: KZ.beige, display: 'grid', placeItems: 'center', fontSize: 24
              }}>{p.emoji}</div>
                <div>
                  <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 18, color: KZ.brown }}>{p.name}</div>
                  <div style={{ fontFamily: FFB, fontSize: 12, color: KZ.text, opacity: 0.7 }}>{p.meta}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>);

}

// ────────── BRAND / PERSONALIZZAZIONE ──────────
function Brand() {
  const themes = [
  { name: 'Cascina dei Lupi', accent: '#C8841A', secondary: '#6B7F47', desc: 'Tema "campagna classica" — ambra, oliva, beige caldo.' },
  { name: 'Apicoltura Marini', accent: '#D4A017', secondary: '#8B5A2B', desc: 'Tema "miele" — oro intenso, marrone tostato.' },
  { name: 'Frantoio del Borgo', accent: '#6B7F47', secondary: '#4A5D2E', desc: 'Tema "olio EVO" — verde oliva, terra di Siena.' }];

  return (
    <section id="brand" style={{ background: KZ.brown, color: KZ.beige, padding: '120px 0' }}>
      <Container>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto' }}>
          <Overline color="#E8B95B">Personalizzazione</Overline>
          <Display size={56} color={KZ.beige} style={{ marginTop: 16, lineHeight: 1.15, marginBottom: 24 }}>Il tuo nome.<br />I tuoi colori. Il tuo logo.</Display>
          <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, opacity: 0.85 }}>
            Cuciamo l'app addosso alla tua cascina. Logo, colori, nome, comunicazione — tutto su misura della tua realtà. I tuoi clienti scaricano un'app che parla di te.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 64 }}>
          {themes.map((t) =>
          <div key={t.name} style={{
            background: KZ.beige, color: KZ.text,
            borderRadius: 20, padding: 20,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
            overflow: 'hidden'
          }}>
              <div style={{ width: 160, height: 310, overflow: 'hidden', position: 'relative', display: 'flex', justifyContent: 'center' }}>
                <div style={{ transform: 'scale(0.55)', transformOrigin: 'top center', position: 'absolute', top: 0 }}>
                  <PhoneMock accent={t.accent} secondary={t.secondary} label={t.name} />
                </div>
              </div>
              <div style={{ textAlign: 'center', marginTop: 8 }}>
                <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 20, color: KZ.brown }}>{t.name}</div>
                <div style={{ fontFamily: FFB, fontSize: 13, color: KZ.text, opacity: 0.75, marginTop: 6 }}>{t.desc}</div>
                <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 14 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: t.accent, border: `1px solid ${KZ.sand}` }} />
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: t.secondary, border: `1px solid ${KZ.sand}` }} />
                  <span style={{ width: 22, height: 22, borderRadius: '50%', background: KZ.beige, border: `1px solid ${KZ.sand}` }} />
                </div>
              </div>
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ────────── SCREENSHOTS ──────────
function Screens() {
  const items = [
  { screen: 'home', title: 'Schermata di prenotazione', body: 'Il cliente sceglie data, quantità e punto di ritiro. Tre tocchi, prenotazione fatta.' },
  { screen: 'shop', title: 'Vetrina prodotti', body: 'Tutti i tuoi prodotti in un colpo d\'occhio, con quantità aggiornate in tempo reale.' },
  { screen: 'pay', title: 'Pagamento sicuro', body: 'Carta di credito, Apple/Google Pay. I soldi arrivano sul tuo conto, niente cassa da contare.' }];

  return (
    <section style={{ background: KZ.paper, padding: '120px 0' }}>
      <Container>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 64px' }}>
          <Overline>L'app, dal vero</Overline>
          <Display size={56} style={{ marginTop: 16 }}>Dai un'occhiata.</Display>
          <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, color: KZ.text, marginTop: 16 }}>
            Queste sono solo alcune delle schermate delle app delle realtà che ci hanno già scelto.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {items.map((it, i) =>
          <div key={it.screen} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
              <div style={{ transform: 'scale(0.95)' }}>
                <PhoneMock screen={it.screen} />
              </div>
              <div style={{ marginTop: 32, fontFamily: FFB, fontWeight: 700, fontSize: 12, color: KZ.amber, letterSpacing: 1 }}>0{i + 1}</div>
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 22, color: KZ.brown, marginTop: 8 }}>{it.title}</div>
              <p style={{ fontFamily: FFB, fontSize: 14, lineHeight: 1.55, color: KZ.text, marginTop: 8, maxWidth: 280 }}>{it.body}</p>
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ────────── PREZZI ──────────
function Prezzi({ onCta }) {
  const plans = [
  {
    name: 'Orto', tagline: 'Per chi inizia.', price: '29',
    features: ['App personalizzata col tuo brand', 'Prenotazioni illimitate', 'Fino a 3 prodotti', '1 punto di ritiro', 'Notifiche push ai clienti', 'Supporto via email'],
    cta: 'Richiedi una demo'
  },
  {
    name: 'Cascina', tagline: 'Per chi è già attivo.', price: '59', featured: true,
    features: ['Tutto del piano Orto', 'Prodotti illimitati', 'Punti di ritiro illimitati', 'Pagamenti integrati', 'Notifiche push ai clienti', 'Supporto telefonico'],
    cta: 'Richiedi una demo'
  },
  {
    name: 'Tenuta', tagline: 'Per aziende strutturate.', price: 'su misura',
    features: ['Tutto del piano Cascina', 'Multi-utente admin', 'Statistiche avanzate', 'Integrazione gestionale', 'Onboarding dedicato', 'Sviluppi su richiesta'],
    cta: 'Parliamone'
  }];

  return (
    <section id="prezzi" style={{ background: KZ.beige, padding: '120px 0' }}>
      <Container>
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 56px' }}>
          <Overline>Prezzi</Overline>
          <Display size={56} style={{ marginTop: 16 }}>A partire da <span style={{ color: KZ.amber }}>29 €/mese.</span></Display>
          <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, color: KZ.text, marginTop: 16 }}>
            Niente costi nascosti, niente percentuali sulle vendite. Personalizza e pubblica la tua app con 490 € e poi scegli il piano mensile più adatto alle tue esigenze.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, alignItems: 'start' }}>
          {plans.map((p) =>
          <div key={p.name} style={{
            background: p.featured ? KZ.brown : KZ.white,
            color: p.featured ? KZ.beige : KZ.text,
            border: `1px solid ${p.featured ? KZ.brown : KZ.sand}`,
            borderRadius: 20, padding: 32,
            transform: p.featured ? 'translateY(-12px)' : 'none',
            position: 'relative'
          }}>
              {p.featured &&
            <div style={{
              position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
              background: KZ.amber, color: KZ.white,
              padding: '6px 14px', borderRadius: 20,
              fontFamily: FFB, fontWeight: 700, fontSize: 11, letterSpacing: 0.5, whiteSpace: 'nowrap'
            }}>Più scelto</div>
            }
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 28, color: p.featured ? KZ.beige : KZ.brown }}>{p.name}</div>
              <div style={{ fontFamily: FFB, fontSize: 13, opacity: 0.75, marginTop: 4 }}>{p.tagline}</div>
              <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                {p.price === 'su misura' ?
              <span style={{ fontFamily: FFD, fontWeight: 700, fontSize: 28, color: p.featured ? KZ.beige : KZ.brown, whiteSpace: 'nowrap' }}>Su misura</span> :

              <>
                    <span style={{ fontFamily: FFD, fontWeight: 700, fontSize: 56, color: p.featured ? KZ.beige : KZ.brown, lineHeight: 1 }}>{p.price}€</span>
                    <span style={{ fontFamily: FFB, fontSize: 14, opacity: 0.7 }}>/mese</span>
                  </>
              }
              </div>
              <div style={{ height: 1, background: p.featured ? 'rgba(245,237,213,0.2)' : KZ.sand, margin: '24px 0' }} />
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {p.features.map((f) =>
              <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: FFB, fontSize: 14, lineHeight: 1.4 }}>
                    <span style={{ color: p.featured ? '#E8B95B' : KZ.amber, fontWeight: 700, flexShrink: 0 }}>✓</span>
                    <span>{f}</span>
                  </li>
              )}
              </ul>
              <div style={{ marginTop: 28 }}>
                <PillButton onClick={onCta} variant={p.featured ? 'primary' : 'outlined'} style={{ width: '100%', justifyContent: 'center' }}>{p.cta}</PillButton>
              </div>
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ────────── FAQ ──────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: 'Quanto tempo serve per averla pronta?', a: 'Dopo la firma, in genere 2-3 settimane: una per la personalizzazione (logo, colori, prodotti, copy), una-due per la pubblicazione su App Store e Google Play. Ti seguiamo passo-passo.' },
  { q: 'I miei clienti devono scaricare un\'app?', a: 'Sì, l\'app è dedicata alla tua cascina e si scarica gratuitamente dagli store.' },
  { q: 'E se non sono pratico di tecnologia?', a: 'Il pannello admin è pensato per chi non è informatico. Se sai usare WhatsApp, sai usare Mia Cascina. Comunque il primo mese ti seguiamo noi a ogni dubbio.' },
  { q: 'Posso vendere prodotti diversi dalle uova?', a: 'Certo. Miele, olio, latte, formaggi, vino, ortaggi, conserve — tutto quello che produci. Ogni prodotto ha la sua scheda, il suo stock, il suo prezzo.' },
  { q: 'Devo per forza accettare pagamenti online?', a: 'No, è opzionale. Puoi tenere il pagamento al ritiro come hai sempre fatto. Quando sei pronto, attivi i pagamenti.' },
  { q: 'Cosa succede se voglio smettere?', a: 'Niente vincoli. Si paga mese per mese e si disdice quando vuoi. Ti diamo un export di tutti i dati (clienti, prenotazioni, prodotti) in formato standard.' }];

  return (
    <section style={{ background: KZ.paper, padding: '120px 0' }}>
      <Container max={900}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Overline>Domande frequenti</Overline>
          <Display size={56} style={{ marginTop: 16 }}>Le cose che ci chiedono.</Display>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) =>
          <div key={i} style={{
            background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16,
            padding: '20px 24px', cursor: 'pointer',
            transition: 'background 120ms'
          }} onClick={() => setOpen(open === i ? -1 : i)}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
                <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 19, color: KZ.brown }}>{it.q}</div>
                <div style={{
                width: 32, height: 32, borderRadius: '50%',
                background: open === i ? KZ.amber : 'transparent',
                border: `1.5px solid ${open === i ? KZ.amber : KZ.sand}`,
                color: open === i ? KZ.white : KZ.amber,
                display: 'grid', placeItems: 'center', flexShrink: 0,
                fontWeight: 700, fontSize: 18,
                transition: 'all 200ms',
                transform: open === i ? 'rotate(45deg)' : 'none'
              }}>+</div>
              </div>
              {open === i &&
            <p style={{
              fontFamily: FFB, fontSize: 15, lineHeight: 1.6, color: KZ.text,
              marginTop: 16, maxWidth: 720,
              animation: 'kz-fade 200ms ease'
            }}>{it.a}</p>
            }
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ────────── CONTATTI ──────────
function Contatti() {
  const [form, setForm] = React.useState({ nome: '', azienda: '', email: '', tel: '', messaggio: '' });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {e.preventDefault();setSent(true);};

  return (
    <section id="contatti" style={{ background: KZ.beige, padding: '120px 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Overline>Parliamone</Overline>
            <Display size={64} style={{ marginTop: 16 }}>Raccontaci la tua cascina.</Display>
            <p style={{ fontFamily: FFB, fontSize: 17, lineHeight: 1.6, color: KZ.text, marginTop: 24 }}>
              Compila il form o scrivici direttamente. Ti rispondiamo entro 24 ore con qualche domanda e una proposta concreta.
            </p>
            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <a href="mailto:igor@igorsquadra.com" style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 16, background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16, textDecoration: 'none', color: 'inherit' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: KZ.beige, display: 'grid', placeItems: 'center', fontSize: 22 }}>✉️</div>
                <div>
                  <div style={{ fontFamily: FFB, fontSize: 12, color: KZ.amber, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>Email</div>
                  <div style={{ fontFamily: FFB, fontSize: 16, color: KZ.brown, fontWeight: 700, marginTop: 2 }}>info@miacascina.com</div>
                </div>
              </a>
              <div style={{ display: 'flex', gap: 12 }}>
                <a href="#" style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16, textDecoration: 'none', color: KZ.text, fontFamily: FFB, fontSize: 14, fontWeight: 600 }}>
                  <span style={{ color: '#1877F2', fontSize: 20, fontWeight: 900 }}>f</span>
                  Facebook
                </a>
                <a href="#" style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 16, textDecoration: 'none', color: KZ.text, fontFamily: FFB, fontSize: 14, fontWeight: 600 }}>
                  <span style={{ color: '#E1306C', fontSize: 18 }}>◉</span>
                  Instagram
                </a>
              </div>
            </div>
          </div>

          <form onSubmit={submit} style={{ background: KZ.white, border: `1px solid ${KZ.sand}`, borderRadius: 20, padding: 32 }}>
            {sent ?
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '40px 0', gap: 16 }}>
                <div style={{ fontSize: 64 }}>🥚</div>
                <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 28, color: KZ.brown }}>Grazie!</div>
                <p style={{ fontFamily: FFB, fontSize: 16, color: KZ.text, maxWidth: 360, lineHeight: 1.5 }}>Abbiamo ricevuto la tua richiesta. Ti rispondiamo entro 24 ore all'indirizzo che ci hai lasciato.</p>
              </div> :

            <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <FormField label="Nome" placeholder="Marco Bianchi" value={form.nome} onChange={(v) => setForm({ ...form, nome: v })} />
                  <FormField label="Azienda agricola" placeholder="Cascina dei Lupi" value={form.azienda} onChange={(v) => setForm({ ...form, azienda: v })} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                  <FormField label="Email" placeholder="marco@cascina.it" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} />
                  <FormField label="Telefono (opzionale)" placeholder="+39 333 ..." value={form.tel} onChange={(v) => setForm({ ...form, tel: v })} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <FormField label="Raccontaci" placeholder="Cosa produci? Quanti clienti hai oggi? Da dove vendi?" multiline value={form.messaggio} onChange={(v) => setForm({ ...form, messaggio: v })} />
                </div>
                <div style={{ marginTop: 28 }}>
                  <PillButton large style={{ width: '100%', justifyContent: 'center' }}>Richiedi una demo →</PillButton>
                </div>
                <p style={{ fontFamily: FFB, fontSize: 12, color: KZ.text, opacity: 0.6, marginTop: 16, textAlign: 'center' }}>
                  Inviando accetti la nostra privacy policy. Niente spam, mai.
                </p>
              </>
            }
          </form>
        </div>
      </Container>
    </section>);

}

function FormField({ label, placeholder, type = 'text', value, onChange, multiline }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: 'block' }}>
      <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 11, letterSpacing: 1, color: KZ.amber, textTransform: 'uppercase', marginBottom: 8 }}>{label}</div>
      {multiline ?
      <textarea value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} rows={4}
      style={{
        width: '100%', boxSizing: 'border-box',
        background: KZ.white, borderRadius: 12,
        border: `${focus ? 2 : 1}px solid ${focus ? KZ.amber : KZ.sand}`,
        padding: focus ? '11px 13px' : '12px 14px',
        fontFamily: FFB, fontSize: 15, color: KZ.text, resize: 'vertical',
        outline: 'none'
      }} /> :

      <input type={type} value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
      style={{
        width: '100%', boxSizing: 'border-box', height: 48,
        background: KZ.white, borderRadius: 12,
        border: `${focus ? 2 : 1}px solid ${focus ? KZ.amber : KZ.sand}`,
        padding: focus ? '0 13px' : '0 14px',
        fontFamily: FFB, fontSize: 15, color: KZ.text, outline: 'none'
      }} />
      }
    </label>);

}

// ────────── CTA STRIP ──────────
function CtaStrip({ onCta }) {
  return (
    <section style={{ background: KZ.amber, padding: '64px 0' }}>
      <Container style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32 }}>
        <div>
          <Display size={42} color={KZ.white}>Pronta in 3 settimane.<br />La tua app, finalmente.</Display>
        </div>
        <div style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
          <PillButton large variant="ghost" style={{ background: KZ.white, color: KZ.brown, border: 'none' }} onClick={onCta}>Richiedi una demo →</PillButton>
        </div>
      </Container>
    </section>);

}

// ────────── FOOTER ──────────
function Footer() {
  return (
    <footer style={{ background: KZ.brown, color: KZ.beige, padding: '64px 0 32px' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <MiaCascinaLogoMark size={44} primary={KZ.amber} secondary={KZ.olive} accent={KZ.beige} />
              <div style={{ fontFamily: FFD, fontWeight: 700, fontSize: 22, letterSpacing: '-0.01em' }}>Mia Cascina</div>
            </div>
            <p style={{ fontFamily: FFB, fontSize: 14, lineHeight: 1.6, opacity: 0.75, marginTop: 16, maxWidth: 360 }}>
              L'app per la vendita diretta delle piccole aziende agricole italiane. Pronta, personalizzata, tua.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 12, letterSpacing: 1, opacity: 0.7, textTransform: 'uppercase', marginBottom: 16 }}>Prodotto</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontFamily: FFB, fontSize: 14 }}>
              <li><a href="#cosa-fa" style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>Cosa fa</a></li>
              <li><a href="#prodotti" style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>Prodotti supportati</a></li>
              <li><a href="#brand" style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>Personalizzazione</a></li>
              <li><a href="#prezzi" style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>Prezzi</a></li>
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 12, letterSpacing: 1, opacity: 0.7, textTransform: 'uppercase', marginBottom: 16 }}>Contatti</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontFamily: FFB, fontSize: 14 }}>
              <li><a href="mailto:igor@igorsquadra.com" style={{ color: 'inherit', textDecoration: 'none', opacity: 0.85 }}>info@miacascina.com</a></li>
              <li style={{ opacity: 0.85 }}>WhatsApp</li>
              <li style={{ opacity: 0.85 }}>Facebook · Instagram</li>
            </ul>
          </div>
          <div>
            <div style={{ fontFamily: FFB, fontWeight: 700, fontSize: 12, letterSpacing: 1, opacity: 0.7, textTransform: 'uppercase', marginBottom: 16 }}>Legale</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontFamily: FFB, fontSize: 14 }}>
              <li style={{ opacity: 0.85 }}>Privacy</li>
              <li style={{ opacity: 0.85 }}>Termini di servizio</li>
              <li style={{ opacity: 0.85 }}>Cookie</li>
            </ul>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(245,237,213,0.2)', display: 'flex', justifyContent: 'space-between', fontFamily: FFB, fontSize: 12, opacity: 0.65 }}>
          <span>© 2026 Mia Cascina · Igor Squadra</span>
          <span>Fatto con cura per i contadini d'Italia 🌾</span>
        </div>
      </Container>
    </footer>);

}

Object.assign(window, { Nav, HeroA, HeroB, HeroC, CosaFa, Prodotti, Brand, Screens, Prezzi, FAQ, Contatti, CtaStrip, Footer, KZ });