// AboutPage.jsx — "Chi siamo"
function AboutPage({ onNavigate }) {
  return (
    <main>
      <AboutHero />
      <AboutValues />
      <AboutFranco />
      <AboutWhyUs />
      <AboutCTA onNavigate={onNavigate} />
    </main>
  );
}

/* SEZIONE 1 — Storia e origini */
function AboutHero() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FFFFFF 0%, #F7F3EF 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.5, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', padding: '88px 32px 80px' }}>
        <div style={{ maxWidth: 880 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 16 }}>Chi siamo · La storia</div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-1.2px', color: '#1A1A1A', marginBottom: 28, textWrap: 'balance' }}>
            Come è nato <span className="ds-grad-text">Deux Soleil</span>.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: '#3a3a3a', maxWidth: 760 }}>
            Deux Soleil nasce nel 2009 come attività di famiglia — Franco l'ha aperta insieme a suo fratello con un'idea semplice: fare una cosa sola, fatta bene, ogni giorno. Il nome Deux Soleil arriva nel 2015. Da allora Franco gestisce tutto in prima persona, a Carmagnola. I clienti sono diventati persone di fiducia — e quella fiducia è il motivo per cui Deux Soleil è ancora qui, dal 2009.
          </p>

          {/* Timeline strip */}
          <div className="timeline-strip" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { y: '2009', t: 'L\u2019apertura', d: 'Franco apre l\u2019attività insieme a suo fratello in Corso Sacchirone, a Carmagnola.' },
              { y: '2015', t: 'Nasce Deux Soleil', d: 'Arriva il nome che oggi conosci. Da qui in poi, Franco gestisce tutto in prima persona.' },
              { y: 'Oggi', t: 'I clienti tornano', d: 'Sempre a Carmagnola, dal 2009. La fiducia è il motivo per cui siamo ancora qui.' },
            ].map((s, i) => (
              <div key={i} style={{ padding: '24px 26px 26px', borderRadius: 18, background: '#FFFFFF', boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }}>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: '#E8621A', marginBottom: 12 }}>{s.y}</div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, color: '#1A1A1A', marginBottom: 8 }}>{s.t}</div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.6, color: '#6B6B6B' }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 2 — Valori e missione */
function AboutValues() {
  const values = [
    { n: '01', t: 'Costanza', d: 'Lo stesso standard ogni volta — non dipende dal giorno, dall\u2019ora o da quanto sei di fretta. Quando entri da Deux Soleil, sai già cosa aspettarti.' },
    { n: '02', t: 'Cura', d: 'Ogni macchinario è scelto per dare risultati uniformi e duraturi. Ogni prodotto è selezionato perché funziona — non perché riempie uno scaffale.' },
    { n: '03', t: 'Fiducia', d: 'Franco conosce i suoi clienti per nome e da anni. Quel rapporto non si costruisce con la pubblicità — si costruisce facendo sempre la cosa giusta, una sessione alla volta.' },
  ];
  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div style={{ maxWidth: 680, marginBottom: 56 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>I nostri valori</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance' }}>
            In cosa crediamo.
          </h2>
        </div>

        <div className="values-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {values.map((v) => (
            <div key={v.n} style={{ position: 'relative', padding: '40px 32px 36px', borderRadius: 20, background: 'var(--ds-grad-solar-diag)', overflow: 'hidden', boxShadow: '0 12px 32px rgba(232,98,26,0.22)' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 56, lineHeight: 1, color: 'transparent', WebkitTextStroke: '1.5px rgba(255,255,255,0.85)', marginBottom: 24 }}>{v.n}</div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 28, color: '#FFFFFF', marginBottom: 12 }}>{v.t}</div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.65, color: 'rgba(255,255,255,0.9)' }}>{v.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 3 — Team / Franco */
function AboutFranco() {
  return (
    <section className="section" style={{ background: '#F7F3EF' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 64, alignItems: 'center' }} >
        <div className="franco-portrait" style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 24, overflow: 'hidden', boxShadow: '0 12px 40px rgba(132,20,16,0.25)' }}>
          {/* Foto Franco */}
          <img src="assets/photo-franco.jpg" alt="Franco Girgenti — titolare Deux Soleil, Carmagnola"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%' }} />

          {/* Top gradient \u2014 readability per eyebrow + name */}
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '38%', background: 'linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0) 100%)', pointerEvents: 'none' }} />
          {/* Bottom gradient \u2014 readability per location + license */}
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '48%', background: 'linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,0.55) 60%, rgba(26,26,26,0.8) 100%)', pointerEvents: 'none' }} />
          {/* Texture diagonale */}
          <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 14px)', mixBlendMode: 'overlay', pointerEvents: 'none' }} />

          {/* Top: eyebrow + name */}
          <div style={{ position: 'absolute', top: 28, left: 28, right: 28, color: '#fff' }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', marginBottom: 10 }}>Il titolare</div>
            <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 38, lineHeight: 1.05, textShadow: '0 2px 10px rgba(0,0,0,0.45)' }}>Franco<br/>Girgenti</div>
          </div>

          {/* Bottom-left: location */}
          <div style={{ position: 'absolute', bottom: 30, left: 28, color: 'rgba(255,255,255,0.9)' }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>Carmagnola</div>
            <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 16, marginTop: 4, textShadow: '0 1px 6px rgba(0,0,0,0.4)' }}>dal 2009</div>
          </div>
        </div>

        <div>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Chi trovi quando entri</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', marginBottom: 12, textWrap: 'balance' }}>
            Franco Girgenti
          </h2>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 500, color: '#E8621A', letterSpacing: 0.5, marginBottom: 24 }}>Titolare · Deux Soleil</div>

          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.7, color: '#3a3a3a', marginBottom: 28 }}>
            Franco gestisce Deux Soleil dal 2009. Ha conseguito il diploma di abilitazione presso una scuola di estetica professionale — sa cosa fa e perché lo fa. Conosce i suoi clienti per nome, ricorda il loro fototipo, sa come è andata l'ultima sessione. Non è un dettaglio — è il modo in cui lavora.
          </p>

          {/* Signature row */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '18px 22px', borderRadius: 16, background: '#FFFFFF', border: '1px solid #F0EBE5' }}>
            <div style={{ width: 48, height: 48, borderRadius: 999, background: 'var(--ds-grad-solar)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon.Quote size={20} color="#fff" />
            </div>
            <p style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 400, fontSize: 18, lineHeight: 1.45, color: '#1A1A1A', margin: 0, textWrap: 'pretty' }}>
              “Il colore lo decide la pelle, non il cronometro. Per questo ogni sessione è diversa.”
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 4 — Perché sceglierci */
function AboutWhyUs() {
  const points = [
    { n: 'Dal 2009', t: 'A Carmagnola, da sempre.', d: 'Non siamo il posto con più pubblicità — siamo quello in cui si torna. A Carmagnola dal 2009, non è un caso.' },
    { n: 'Diploma', t: 'Abilitazione estetica professionale.', d: 'Franco ha il diploma di abilitazione estetica. Ogni sessione è calibrata sul tuo fototipo — valuta la tua pelle, definisce la durata giusta, ti guida se è la prima volta. Nessuna approssimazione.' },
    { n: '3 brand', t: 'Ergoline · Mia Cosmetici · Tecnosole.', d: 'Macchinari Ergoline e Tecnosole, prodotti Mia Cosmetici — scelti uno per uno. Niente di casuale: solo quello che dà risultati uniformi, senza bruciature e senza sorprese.' },
  ];
  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div style={{ maxWidth: 680, marginBottom: 48 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Perché sceglierci</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance' }}>
            Perché i nostri clienti tornano.
          </h2>
        </div>

        <div style={{ display: 'grid', gap: 14 }}>
          {points.map((p, i) => (
            <div key={i} className="whyus-row" style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, padding: '28px 32px', borderRadius: 18, background: '#F7F3EF', alignItems: 'center' }}>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(28px, 3vw, 38px)', lineHeight: 1, color: '#E8621A', letterSpacing: '-0.5px' }}>{p.n}</div>
              <div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, color: '#1A1A1A', marginBottom: 8 }}>{p.t}</div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15.5, lineHeight: 1.65, color: '#3a3a3a' }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 5 — CTA secondaria */
function AboutCTA({ onNavigate }) {
  return (
    <section style={{ background: '#FFFFFF', padding: '40px 0 88px' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, padding: '40px 48px', borderRadius: 20, background: 'var(--ds-grad-alba-diag)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative', maxWidth: 540 }}>
            <h3 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.1, letterSpacing: '-0.5px', color: '#1A1A1A', textWrap: 'balance' }}>
              Vuoi vedere di persona come lavoriamo?
            </h3>
          </div>
          <div style={{ position: 'relative', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" onClick={() => onNavigate('contatti')}>Vieni a trovarci <Icon.Arrow size={14} color="#fff"/></button>
            <button className="btn btn-secondary" onClick={() => onNavigate('servizi')}>Scopri i servizi</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Placeholder tag helper */
function PHA({ children }) {
  return <span style={{ background: '#FFF5E8', color: '#85240E', padding: '1px 7px', borderRadius: 4, fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: '0.92em' }}>{children}</span>;
}

Object.assign(window, { AboutPage, PHA });
