// sections.jsx — Nav, Hero, "Cosa fa", Problemi
// Clean, friendly B2B style for non-technical SMB owners.

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────
// Shared primitives
// ─────────────────────────────────────────────────────────────────

function Eyebrow({ children, style }) {
  return (
    <div style={{
      fontFamily: 'var(--mono)',
      fontSize: 12,
      letterSpacing: '0.06em',
      textTransform: 'uppercase',
      color: 'var(--accent)',
      fontWeight: 600,
      ...style,
    }}>
      {children}
    </div>
  );
}

function SectionHeader({ kicker, title, lede, align = 'left' }) {
  return (
    <div style={{
      marginBottom: 64, textAlign: align,
      maxWidth: align === 'center' ? 760 : 'none',
      margin: align === 'center' ? '0 auto 64px' : '0 0 64px',
    }}>
      <Eyebrow style={{ marginBottom: 18 }}>{kicker}</Eyebrow>
      <h2 style={{
        fontFamily: 'var(--sans)',
        fontSize: 'clamp(34px, 4.4vw, 56px)',
        fontWeight: 700,
        lineHeight: 1.05,
        letterSpacing: '-0.025em',
        margin: '0 0 18px',
        maxWidth: align === 'center' ? '100%' : 820,
      }}>{title}</h2>
      {lede && (
        <p style={{
          fontSize: 'clamp(17px, 1.3vw, 20px)',
          color: 'var(--fg-soft)',
          margin: 0,
          maxWidth: align === 'center' ? '100%' : 620,
          lineHeight: 1.55,
        }}>{lede}</p>
      )}
    </div>
  );
}

function Pill({ children, tone = 'neutral' }) {
  const colors = {
    neutral: { bg: 'var(--bg-3)', fg: 'var(--fg-soft)' },
    accent: { bg: 'var(--accent-soft)', fg: 'var(--accent-deep)' },
    positive: { bg: 'var(--positive-soft)', fg: 'var(--positive)' },
    warm: { bg: 'var(--warm-soft)', fg: '#b85a1f' },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px', borderRadius: 999,
      background: colors.bg, color: colors.fg,
      fontFamily: 'var(--mono)', fontSize: 11,
      fontWeight: 600, letterSpacing: '0.02em',
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

window.Eyebrow = Eyebrow;
window.SectionHeader = SectionHeader;
window.Pill = Pill;

// ─────────────────────────────────────────────────────────────────
// Nav
// ─────────────────────────────────────────────────────────────────

function Nav({ scrolled }) {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '12px 0' : '20px 0',
      background: scrolled ? 'rgba(251, 250, 247, 0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '0.5px solid var(--rule)' : '0.5px solid transparent',
      transition: 'padding .3s ease, background .3s ease, border-color .3s ease',
      transform: 'translateZ(0)',
      willChange: scrolled ? 'background' : 'auto',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#top" style={{
          textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Logo />
          <span style={{
            fontFamily: 'var(--sans)', fontSize: 19, fontWeight: 700,
            letterSpacing: '-0.02em', color: 'var(--fg)',
          }}>Solvera</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ display: 'flex', gap: 4 }} className="nav-links">
            {[
              ['Demo', '#demo'],
              ['Esempi', '#esempi'],
              ['Per chi', '#settori'],
              ['Perché noi', '#perche-noi'],
              ['FAQ', '#faq'],
            ].map(([l, h]) => (
              <a key={h} href={h} style={{
                textDecoration: 'none', color: 'var(--fg-soft)',
                fontSize: 14, fontWeight: 500,
                padding: '8px 12px', borderRadius: 8,
                transition: 'background .15s ease, color .15s ease',
              }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'var(--bg-3)';
                  e.currentTarget.style.color = 'var(--fg)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.color = 'var(--fg-soft)';
                }}
              >{l}</a>
            ))}
          </div>
          <a href="/index-es.html" title="Versión en español" style={{
            marginLeft: 8,
            textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'var(--bg-3)', color: 'var(--fg)',
            padding: '9px 14px', borderRadius: 999,
            fontSize: 13, fontWeight: 600,
            border: '1px solid var(--rule)',
            transition: 'transform .15s ease, border-color .15s ease',
          }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.borderColor = 'var(--rule-strong)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--rule)'; }}
          >🇪🇸 ES</a>
          <a href="https://wa.me/393793762553?text=Ciao%20Solvera%2C%20vorrei%20info" target="_blank" rel="noopener" style={{
            marginLeft: 8,
            textDecoration: 'none',
            background: 'var(--accent)', color: '#fff',
            padding: '11px 18px', borderRadius: 999,
            fontSize: 14, fontWeight: 600,
            transition: 'transform .15s ease',
          }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
          >Scrivici</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 760px) { .nav-links { display: none !important; } }
      `}</style>
    </nav>
  );
}

function Logo({ size = 28 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: 8,
      background: 'var(--fg)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative',
    }}>
      <span style={{
        width: size * 0.5, height: size * 0.5, borderRadius: '50%',
        background: 'var(--accent)',
        position: 'relative',
      }}>
        <span style={{
          position: 'absolute', right: -2, top: -2,
          width: 6, height: 6, borderRadius: '50%',
          background: 'var(--bg)',
          border: '2px solid var(--fg)',
        }} />
      </span>
    </span>
  );
}
window.Nav = Nav;
window.Logo = Logo;

// ─────────────────────────────────────────────────────────────────
// Hero
// ─────────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section id="top" style={{
      position: 'relative',
      paddingTop: 'clamp(110px, 14vh, 160px)',
      paddingBottom: 'clamp(60px, 8vh, 90px)',
      overflow: 'hidden',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)',
          gap: 72,
          alignItems: 'center',
        }} className="hero-grid">

          {/* LEFT */}
          <div>
            <h1 style={{
              fontFamily: 'var(--sans)',
              fontSize: 'clamp(36px, 5.2vw, 68px)',
              fontWeight: 700,
              lineHeight: 1.05,
              letterSpacing: '-0.035em',
              margin: '0 0 28px',
            }}>
              Il <span style={{
                background: 'linear-gradient(120deg, var(--accent) 0%, var(--accent-deep) 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
              }}>78%</span> dei clienti compra da chi risponde per primo.{' '}<br />
              <span style={{ color: 'var(--fg-soft)', fontWeight: 600 }}>Tu quanto ci metti?</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.35vw, 20px)',
              color: 'var(--fg-soft)',
              margin: '0 0 36px',
              maxWidth: 560,
              lineHeight: 1.55,
            }}>
              In <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>Solvera</strong> ti seguiamo lungo <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>tutto il ciclo del cliente</strong>: dal <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>primo contatto</strong> alla <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>gestione di email, preventivi e chiamate</strong>, fino a <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>follow-up, promemoria e nuovi appuntamenti</strong>. Un sistema AI su misura, <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>che si integra ai tuoi strumenti</strong>.
            </p>

            <div className="hero-cta-row" style={{
              display: 'flex', alignItems: 'center', gap: 18,
              flexWrap: 'wrap',
            }}>
              <a href="https://calendly.com/valentina-aresi/30min" target="_blank" rel="noopener" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                background: 'var(--accent)', color: '#fff',
                padding: '16px 24px', borderRadius: 999,
                textDecoration: 'none',
                fontSize: 17, fontWeight: 600,
                boxShadow: 'var(--shadow-md)',
                transition: 'transform .15s ease, box-shadow .15s ease',
              }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-lg)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                }}
              >
                Prenota 30 minuti gratuiti
                <ArrowRight />
              </a>
            </div>

          </div>

          {/* RIGHT — Live automation card */}
          <HeroCard />
        </div>
      </div>
    </section>
  );
}

function ToolsStrip() {
  const tools = [
    { name: 'Gmail',           mono: 'M',  bg: '#EA4335', fg: '#fff' },
    { name: 'WhatsApp',        mono: 'W',  bg: '#25D366', fg: '#fff' },
    { name: 'Telegram',        mono: 'T',  bg: '#229ED9', fg: '#fff' },
    { name: 'Excel',           mono: 'X',  bg: '#1F6E43', fg: '#fff' },
    { name: 'Google Calendar', mono: '31', bg: '#1A73E8', fg: '#fff' },
    { name: 'Stripe',          mono: 'S',  bg: '#635BFF', fg: '#fff' },
    { name: 'Il tuo gestionale', mono: '\u2022\u2022\u2022', bg: 'var(--bg-3)', fg: 'var(--fg-soft)', dashed: true },
  ];

  return (
    <section id="integrazioni" style={{
      padding: '88px 0 96px',
      background: 'var(--bg-3)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle decorative grid */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0)',
        backgroundSize: '28px 28px',
        opacity: 0.5,
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.4fr)',
          gap: 'clamp(32px, 6vw, 80px)',
          alignItems: 'center',
        }} className="tools-grid">
          {/* Heading column */}
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>Integrazioni</Eyebrow>
            <h2 style={{
              margin: '0 0 16px',
              fontSize: 'clamp(28px, 3.4vw, 42px)',
              fontWeight: 700,
              letterSpacing: '-0.025em',
              lineHeight: 1.08,
              color: 'var(--fg)',
            }}>
              Funziona con gli strumenti{' '}<br />
              che <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>già</em> usi ogni giorno.
            </h2>
            <p style={{
              margin: '0 0 20px',
              fontSize: 16,
              lineHeight: 1.55,
              color: 'var(--fg-soft)',
              maxWidth: 420,
            }}>
              Nessuna migrazione. Nessun cambio di abitudini.
              Partiamo dai tuoi strumenti — anche dal gestionale custom
              che hai da dieci anni.
            </p>
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              fontSize: 13,
              fontFamily: 'var(--mono)',
              color: 'var(--fg-mute)',
              padding: '8px 12px',
              background: 'var(--bg-2)',
              border: '1px solid var(--rule)',
              borderRadius: 999,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--positive)',
              }} />
              + 30 altre integrazioni su richiesta
            </div>
          </div>

          {/* Tiles column */}
          <div className="tools-tiles" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))',
            gap: 12,
          }}>
            {tools.map((t) => (
              <div key={t.name} style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 14,
                padding: '14px 18px 14px 14px',
                background: 'var(--bg-2)',
                border: '1px solid var(--rule)',
                borderRadius: 16,
                boxShadow: 'var(--shadow-sm)',
                transition: 'transform .15s ease, box-shadow .15s ease',
              }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-2px)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-md)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
                }}
              >
                <span style={{
                  width: 40, height: 40,
                  borderRadius: 11,
                  background: t.bg,
                  color: t.fg,
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontWeight: 800,
                  fontSize: t.mono.length > 1 ? 13 : 19,
                  letterSpacing: t.mono.length > 1 ? '-0.02em' : 0,
                  border: t.dashed ? '1.5px dashed var(--rule-strong)' : 'none',
                  boxSizing: 'border-box',
                  fontFamily: t.dashed ? 'var(--mono)' : 'var(--sans)',
                  lineHeight: 1,
                  flexShrink: 0,
                }}>{t.mono}</span>
                <span style={{
                  fontSize: 15,
                  fontWeight: 600,
                  color: 'var(--fg)',
                  letterSpacing: '-0.005em',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}>{t.name}</span>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .tools-grid { grid-template-columns: 1fr !important; }
            .tools-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
          }
          @media (max-width: 380px) {
            .tools-tiles { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function HeroCard() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{ position: 'relative' }} className="hero-card-wrap">
      {/* Soft background blob */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: '-40px -40px -40px 0',
        background: 'radial-gradient(ellipse at 60% 50%, var(--accent-soft) 0%, transparent 60%)',
        zIndex: 0, filter: 'blur(20px)',
      }} />

      <div style={{
        position: 'relative', zIndex: 1,
        background: 'var(--bg-2)',
        borderRadius: 'var(--radius-lg)',
        boxShadow: 'var(--shadow-lg)',
        border: '1px solid var(--rule)',
        overflow: 'hidden',
      }}>
        {/* Card header */}
        <div style={{
          padding: '14px 18px',
          borderBottom: '1px solid var(--rule)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: 'var(--bg)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 28, height: 28, borderRadius: 8,
              background: '#25D366',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'white', fontSize: 14, fontWeight: 700,
            }}>w</span>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>WhatsApp Business</div>
              <div style={{ fontSize: 11, color: 'var(--fg-mute)' }}>Pizzeria da Marco</div>
            </div>
          </div>
          <Pill tone="positive">
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: 'var(--positive)',
              animation: 'pulse 1.6s ease-in-out infinite',
            }} />
            Risposta automatica attiva
          </Pill>
        </div>

        {/* Chat body */}
        <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 360 }}>
          {/* Client msg */}
          <div style={{
            alignSelf: 'flex-start', maxWidth: '82%',
            opacity: step >= 0 ? 1 : 0,
            transform: step >= 0 ? 'translateY(0)' : 'translateY(8px)',
            transition: 'all .4s ease',
          }}>
            <div style={{
              fontSize: 11, color: 'var(--fg-mute)', marginBottom: 4,
              fontWeight: 500,
            }}>Sara · 22:14</div>
            <div style={{
              background: 'var(--bg-3)', padding: '12px 14px',
              borderRadius: '4px 14px 14px 14px',
              fontSize: 15, lineHeight: 1.45, color: 'var(--fg)',
            }}>
              Buonasera, avete posto domani sera alle 20 per 4 persone? Una è celiaca, vorrei sapere se avete pizze senza glutine 🙏
            </div>
          </div>

          {/* AI thinking pill */}
          <div style={{
            alignSelf: 'center', padding: '6px 12px',
            background: 'var(--accent-soft)', color: 'var(--accent-deep)',
            borderRadius: 999, fontSize: 11, fontWeight: 600,
            fontFamily: 'var(--mono)', letterSpacing: '0.02em',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            opacity: (step >= 1 && step < 3) ? 1 : 0,
            transition: 'opacity .35s ease',
            visibility: (step >= 1 && step < 3) ? 'visible' : 'hidden',
          }}>
            <Spinner /> Sistema sta rispondendo · 1.2s
          </div>

          {/* AI response */}
          <div style={{
            alignSelf: 'flex-end', maxWidth: '85%',
            opacity: step >= 2 ? 1 : 0,
            transform: step >= 2 ? 'translateY(0)' : 'translateY(8px)',
            transition: 'opacity .4s ease, transform .4s ease',
          }}>
              <div style={{
                fontSize: 11, color: 'var(--fg-mute)', marginBottom: 4,
                fontWeight: 500, textAlign: 'right',
                display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end',
              }}>
                Risposta automatica
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                  background: 'var(--accent-soft)', color: 'var(--accent-deep)',
                  padding: '1px 6px', borderRadius: 4,
                  fontSize: 10, fontWeight: 700,
                }}>AI</span>
              </div>
              <div style={{
                background: '#dcf8c6', padding: '12px 14px',
                borderRadius: '14px 4px 14px 14px',
                fontSize: 15, lineHeight: 1.45, color: 'var(--fg)',
                border: '1px solid rgba(20, 162, 99, 0.15)',
              }}>
                Buonasera Sara! 🍕 Sì, domani alle 20 abbiamo un tavolo da 4. Confermo che abbiamo pizze senza glutine — usiamo un forno dedicato per evitare contaminazioni. Le tengo il tavolo a nome Sara, va bene?
              </div>
              <div style={{
                marginTop: 6, fontSize: 10, color: 'var(--fg-mute)',
                fontFamily: 'var(--mono)', textAlign: 'right',
                letterSpacing: '0.02em',
              }}>
                22:14 · letto
              </div>
          </div>

          {/* Outcome */}
          <div style={{
            marginTop: 'auto', padding: '12px 14px',
            background: 'var(--positive-soft)',
            borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 12,
            opacity: step >= 3 ? 1 : 0,
            transform: step >= 3 ? 'translateY(0)' : 'translateY(8px)',
            transition: 'opacity .4s ease, transform .4s ease',
          }}>
            <span style={{
              width: 28, height: 28, borderRadius: '50%',
              background: 'var(--positive)', color: 'white',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 14,
            }}>✓</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--positive)' }}>
                Prenotazione confermata
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-soft)' }}>
                Aggiunta al calendario · Marco notificato via Telegram
              </div>
            </div>
          </div>
        </div>

        {/* Card footer */}
        <div style={{
          padding: '10px 16px',
          borderTop: '1px solid var(--rule)',
          background: 'var(--bg)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 11, color: 'var(--fg-mute)', fontFamily: 'var(--mono)',
          letterSpacing: '0.02em',
        }}>
          <span>Tempo medio risposta: 1.4s</span>
          <span>Funziona 24/7 · Anche di notte</span>
        </div>
      </div>

      {/* Floating mini-stat */}
      <div style={{
        position: 'absolute', top: 30, right: -24,
        background: 'var(--fg)', color: 'var(--bg)',
        borderRadius: 14, padding: '14px 18px',
        boxShadow: 'var(--shadow-lg)',
        zIndex: 2,
        minWidth: 180,
      }} className="hero-float-1">
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
          color: 'var(--fg-mute)', textTransform: 'uppercase',
          marginBottom: 6,
        }}>Questo mese</div>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
          247
        </div>
        <div style={{ fontSize: 12, marginTop: 4, color: 'var(--fg-mute)' }}>
          risposte automatiche
        </div>
      </div>
      <div style={{
        position: 'absolute', bottom: 30, left: -28,
        background: 'var(--bg-2)', color: 'var(--fg)',
        borderRadius: 14, padding: '12px 16px',
        boxShadow: 'var(--shadow-lg)',
        border: '1px solid var(--rule)',
        zIndex: 2,
        display: 'flex', alignItems: 'center', gap: 12,
      }} className="hero-float-2">
        <span style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'var(--warm-soft)', color: 'var(--warm)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18,
        }}>⏱</span>
        <div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>
            +14h
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-mute)' }}>
            risparmiate / sett.
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 60px !important; }
          .hero-card-wrap { max-width: 500px; margin: 0 auto; }
          .hero-float-1, .hero-float-2 { display: none; }
          .hero-grid h1, .hero-grid > div > p { text-align: center; margin-left: auto; margin-right: auto; }
          .hero-cta-row { justify-content: center !important; }
        }
      `}</style>
    </div>
  );
}

function Spinner() {
  return (
    <span style={{
      width: 10, height: 10,
      border: '2px solid var(--accent-soft)',
      borderTopColor: 'var(--accent)',
      borderRadius: '50%',
      display: 'inline-block',
      animation: 'spin .8s linear infinite',
    }}>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </span>
  );
}

function ArrowRight() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}

window.Hero = Hero;
window.ArrowRight = ArrowRight;

// ─────────────────────────────────────────────────────────────────
// "Cosa fa l'AI per te" — simple 3-card explainer
// ─────────────────────────────────────────────────────────────────

function WhatItDoes() {
  const items = [
    {
      icon: '👂',
      title: 'Analisi a costo zero',
      desc: 'Una chiamata di 30 minuti per mappare i tuoi flussi di lavoro. Individuiamo esattamente dove la tua giornata si blocca, quali compiti ripetitivi ti costano ore e dove stai rischiando di perdere clienti.',
    },
    {
      icon: '🔧',
      title: 'Integrazione su misura',
      desc: 'Invece di stravolgere il tuo modo di lavorare, portiamo l\'Intelligenza Artificiale dentro i tuoi strumenti di tutti i giorni (Gmail, WhatsApp, il tuo gestionale). Nessun pacchetto standard: creiamo una soluzione cucita al millimetro sui tuoi reali bisogni.',
    },
    {
      icon: '🤝',
      title: 'Partnership continua',
      desc: 'Non ti vendiamo un software per poi sparire. Manutenzione, aggiornamenti e modifiche sono tutti inclusi nel canone mensile. Ci occupiamo noi della tecnologia, così tu puoi concentrarti sul tuo business.',
    },
  ];

  return (
    <section style={{ padding: '100px 0 60px' }}>
      <div className="container">
        <SectionHeader
          align="center"
          kicker="Cosa facciamo, in concreto"
          title="Niente software da imparare, niente pacchetti preconfezionati."
          lede="Ci porti il tuo problema e noi costruiamo la soluzione."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)',
              borderRadius: 'var(--radius-lg)',
              padding: 32,
              border: '1px solid var(--rule)',
              boxShadow: 'var(--shadow-sm)',
              transition: 'transform .2s ease, box-shadow .2s ease',
            }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                e.currentTarget.style.boxShadow = 'var(--shadow-md)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
              }}
            >
              <div style={{
                width: 52, height: 52, borderRadius: 14,
                background: 'var(--accent-soft)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 26, marginBottom: 20,
              }}>{it.icon}</div>
              <h3 style={{
                margin: '0 0 10px',
                fontSize: 22, fontWeight: 700,
                letterSpacing: '-0.015em',
              }}>{it.title}</h3>
              <p style={{
                margin: 0, color: 'var(--fg-soft)',
                fontSize: 16, lineHeight: 1.55,
              }}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhatItDoes = WhatItDoes;

// ─────────────────────────────────────────────────────────────────
// Pain points — 4 simpler, friendlier
// ─────────────────────────────────────────────────────────────────

const PAINS = [
  {
    icon: '📨',
    title: 'La trappola delle email fotocopia',
    desc: 'Domande su prezzi, orari, disponibilità: ogni mattina riscrivi le solite risposte. Eppure ogni cliente pretende un trattamento unico e immediato.',
  },
  {
    icon: '⏰',
    title: 'Il "buco nero" dei lead serali',
    desc: 'Un potenziale cliente ti scrive alle 21:00. Tu rispondi la mattina dopo, ma nel frattempo ha già contattato un tuo concorrente. Online, il primo che risponde vince.',
  },
  {
    icon: '⭐',
    title: 'Le recensioni Google abbandonate',
    desc: 'Non è che non ti importi, è che manca il tempo. Così i ringraziamenti e le critiche restano lì appesi. I potenziali clienti leggono, e l\'algoritmo di Google penalizza il tuo silenzio.',
  },
  {
    icon: '🧾',
    title: 'La tortura del preventivo urgente',
    desc: 'Un cliente lo vuole "per ieri", e tu molli tutto per compilarlo. È sempre lo stesso documento, cambiano solo tre righe — ma ogni volta ci perdi mezz\'ora, e nel frattempo la giornata si ferma.',
  },
];

function PainPoints() {
  return (
    <section id="problema" style={{
      padding: '80px 0 100px',
      position: 'relative',
    }}>
      <div className="container">
        <SectionHeader
          kicker="Il problema"
          title="Ti suona familiare?"
        />

        <p style={{
          fontSize: 'clamp(22px, 2.2vw, 30px)',
          lineHeight: 1.4,
          letterSpacing: '-0.012em',
          color: 'var(--fg-soft)',
          margin: '-40px 0 56px',
          maxWidth: 880,
          fontWeight: 500,
        }}>
          Ogni giorno, se gestisci la tua azienda, ci sono almeno <strong style={{ color: 'var(--fg)', fontWeight: 700 }}>4 ore che spariscono nel nulla</strong>. Non le passi a pianificare, a cercare nuovi clienti o a migliorare i tuoi servizi. Le passi a <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>fare il dipendente di te stesso</em>.
        </p>

        <div style={{
          fontFamily: 'var(--mono)',
          fontSize: 12,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          color: 'var(--fg-mute)',
          fontWeight: 600,
          marginBottom: 20,
          marginTop: -8,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 10,
        }}>
          <span style={{
            width: 24, height: 1, background: 'var(--rule-strong)',
          }} />
          Ecco dove finisce il tuo tempo
        </div>

        <div className="pains-row" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          gap: 14,
        }}>
          {PAINS.map((p, i) => (
            <div key={i} style={{
              background: 'var(--bg-2)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius)',
              padding: 20,
              position: 'relative',
            }}>
              <div style={{
                fontSize: 24, marginBottom: 12,
                width: 42, height: 42, borderRadius: 10,
                background: 'var(--bg-3)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{p.icon}</div>
              <h3 style={{
                margin: '0 0 8px',
                fontSize: 16, fontWeight: 700,
                lineHeight: 1.3, letterSpacing: '-0.01em',
                textWrap: 'balance',
              }}>{p.title}</h3>
              <p style={{
                margin: 0, color: 'var(--fg-soft)',
                fontSize: 13.5, lineHeight: 1.5,
              }}>{p.desc}</p>
            </div>
          ))}
          <style>{`
            @media (max-width: 1080px) {
              .pains-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            }
            @media (max-width: 560px) {
              .pains-row { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>

        <div className="pains-cta" style={{
          marginTop: 56, padding: '32px 36px',
          background: 'var(--fg)', color: 'var(--bg)',
          borderRadius: 'var(--radius-lg)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap',
        }}>
          <p style={{
            margin: 0, fontSize: 'clamp(20px, 2vw, 26px)',
            fontWeight: 600, letterSpacing: '-0.015em',
            lineHeight: 1.3, maxWidth: 640,
          }}>
            Mentre gli altri cercano di capire come funziona l'AI, tu puoi usarla per superarli. <span style={{ color: 'var(--accent-soft)' }}>Raccontaci la tua routine, noi la automatizziamo.</span>
          </p>
          <a href="https://calendly.com/valentina-aresi/30min" target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: 'var(--bg)', color: 'var(--fg)',
            padding: '14px 22px', borderRadius: 999,
            textDecoration: 'none', fontWeight: 600, fontSize: 15,
            whiteSpace: 'nowrap',
          }}>
            Riprenditi le tue 4 ore — Chiamata gratuita <ArrowRight />
          </a>
          <style>{`
            @media (max-width: 760px) {
              .pains-cta { justify-content: center !important; text-align: center; padding: 28px 24px !important; }
              .pains-cta p { text-align: center; }
              .pains-cta a { white-space: normal !important; text-align: center; }
            }
          `}</style>
        </div>
      </div>
    </section>
  );
}
window.PainPoints = PainPoints;

Object.assign(window, { Eyebrow, SectionHeader, Pill, Nav, Logo, Hero, WhatItDoes, PainPoints, ArrowRight });