/* global React */
const { Badge, Button, Input, Select, Checkbox } = window.DesignSystem_b1e064;
const TREE_CREAM_CT = 'assets/logos/cuoccio-tree-cream.png';
const TREE_LEAF_CT = 'assets/logos/cuoccio-tree-leaf.png';

function FiligreeCt({ side = 'right', width = 'min(58vw, 660px)', opacity = 0.05 }) {
  return <img src={TREE_CREAM_CT} alt="" aria-hidden="true" style={{
    position: 'absolute', top: '50%', transform: 'translateY(-50%)',
    [side]: 'clamp(-220px, -14vw, -80px)', width, opacity,
    pointerEvents: 'none', userSelect: 'none', zIndex: 0,
  }} />;
}

function InfoRow({ label, children }) {
  return (
    <div style={{ padding: 'var(--space-5) 0', borderTop: '1px solid var(--border-soft)' }}>
      <div style={{ fontSize: 'var(--text-eyebrow)', fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>{label}</div>
      <div style={{ fontSize: 'var(--text-base)', color: 'var(--text-primary)', lineHeight: 1.6 }}>{children}</div>
    </div>
  );
}

function Contact({ onSent }) {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); onSent && onSent(); };

  return (
    <div>
      {/* HEADER */}
      <div style={{
        position: 'relative', overflow: 'hidden',
        padding: 'calc(var(--section-y) + 40px) var(--gutter) var(--section-y)',
        background: 'radial-gradient(110% 90% at 80% -10%, rgba(201,162,62,0.18) 0%, var(--forest-900) 50%, var(--forest-950) 100%)',
      }}>
        <FiligreeCt side="right" width="min(60vw, 680px)" opacity={0.06} />
        <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div className="cuoccio-eyebrow" data-reveal style={{ marginBottom: 18 }}>Contatti</div>
          <h1 data-reveal style={{
            fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-hero)',
            lineHeight: 0.92, letterSpacing: '-0.02em', textTransform: 'uppercase', color: 'var(--cream-100)',
          }}>Parliamo di<br /><span style={{ color: 'var(--leaf-500)' }}>buon olio</span></h1>
          <p data-reveal className="cuoccio-lead" style={{ maxWidth: 520, marginTop: 22 }}>
            Per ordini, forniture, visite agli uliveti o semplicemente per una domanda: la famiglia Cuoccio ti risponde di persona.
          </p>
        </div>
      </div>

      {/* FORM + INFO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: 'var(--section-y) var(--gutter)', background: 'var(--grad-section)' }}>
        <FiligreeCt side="left" width="min(50vw, 560px)" opacity={0.04} />
        <div className="r2" style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'var(--space-9)', alignItems: 'start' }}>
          {/* FORM */}
          <div data-reveal style={{ background: 'var(--surface)', border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-7)', boxShadow: 'var(--shadow-card)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: 'var(--space-7) 0' }}>
                <img src={TREE_LEAF_CT} alt="" aria-hidden="true" style={{ width: 64, height: 64, objectFit: 'contain', margin: '0 auto var(--space-5)' }} />
                <h3 style={{ fontSize: 'var(--text-h2)', marginBottom: 12 }}>Grazie!</h3>
                <p style={{ color: 'var(--text-secondary)', maxWidth: 360, margin: '0 auto', lineHeight: 1.7 }}>
                  Abbiamo ricevuto il tuo messaggio. Ti risponderemo al più presto, con la calma di chi conosce il valore del tempo.
                </p>
                <div style={{ marginTop: 'var(--space-6)' }}>
                  <Button variant="secondary" onClick={() => setSent(false)}>Invia un altro messaggio</Button>
                </div>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
                <h2 style={{ fontSize: 'var(--text-h3)', marginBottom: 4 }}>Scrivici</h2>
                <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                  <Input label="Nome" placeholder="Il tuo nome" />
                  <Input label="Cognome" placeholder="Il tuo cognome" />
                </div>
                <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                  <Input label="Email" type="email" placeholder="nome@esempio.it" iconRight={<span>✉</span>} />
                  <Input label="Telefono" placeholder="+39 ___ _______" />
                </div>
                <Select label="Motivo del contatto" placeholder="Scegli un motivo" options={[
                  { value: 'ordine', label: 'Ordine o spedizione' },
                  { value: 'ingrosso', label: 'Forniture e ingrosso' },
                  { value: 'visita', label: 'Visita agli uliveti' },
                  { value: 'altro', label: 'Altra richiesta' },
                ]} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <label style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--text-secondary)' }}>Messaggio</label>
                  <textarea rows={5} placeholder="Raccontaci come possiamo aiutarti…" style={{
                    background: 'var(--forest-900)', border: '1.5px solid var(--border)', borderRadius: 'var(--radius-md)',
                    color: 'var(--text-primary)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                    padding: '14px 16px', resize: 'vertical', outline: 'none',
                  }}
                    onFocus={(e) => { e.target.style.borderColor = 'var(--accent)'; e.target.style.boxShadow = '0 0 0 3px var(--accent-soft)'; }}
                    onBlur={(e) => { e.target.style.borderColor = 'var(--border)'; e.target.style.boxShadow = 'none'; }}
                  />
                </div>
                <Checkbox label="Acconsento al trattamento dei dati secondo l'Informativa privacy" />
                <Button type="submit" variant="primary" size="lg">Invia messaggio</Button>
              </form>
            )}
          </div>

          {/* INFO */}
          <div data-reveal>
            <InfoRow label="Azienda">
              Azienda Agricola Cuoccio<br />
              <span style={{ color: 'var(--text-secondary)' }}>Olivicoltori dal 1937</span>
            </InfoRow>
            <InfoRow label="Dove siamo">
              Contrada uliveti<br />
              70032 Bitonto (BA), Puglia — Italia
            </InfoRow>
            <InfoRow label="Email">
              <a href="mailto:info@cuoccio.it">info@cuoccio.it</a>
            </InfoRow>
            <InfoRow label="Telefono">
              <a href="tel:+390800000000">+39 080 000 0000</a>
            </InfoRow>
            <InfoRow label="Orari">
              Lun – Ven · 8:30 – 18:00<br />
              <span style={{ color: 'var(--text-secondary)' }}>Visite agli uliveti su appuntamento</span>
            </InfoRow>
            <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-5)', flexWrap: 'wrap' }}>
              <Badge variant="leaf" dot>100% Italiano</Badge>
              <Badge variant="terra">Bitonto · Puglia</Badge>
            </div>
          </div>
        </div>
      </section>

      {/* MAP placeholder */}
      <section style={{ padding: '0 var(--gutter) var(--section-y)' }}>
        <div style={{
          maxWidth: 'var(--maxw-wide)', margin: '0 auto',
          position: 'relative', height: 'clamp(260px, 34vw, 440px)',
          borderRadius: 'var(--radius-xl)', overflow: 'hidden',
          border: '1px solid var(--border-soft)',
          background: 'linear-gradient(135deg, var(--terra-600), var(--forest-700) 70%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 60% at 50% 35%, rgba(201,162,62,0.28), transparent 65%)' }} />
          <div data-reveal style={{ position: 'relative', textAlign: 'center', color: 'var(--cream-100)' }}>
            <img src={TREE_LEAF_CT} alt="" aria-hidden="true" style={{ width: 52, height: 52, objectFit: 'contain', margin: '0 auto 12px' }} />
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h3)' }}>Bitonto, Puglia</div>
            <div style={{ fontSize: 'var(--text-sm)', color: 'var(--cream-300)', marginTop: 6 }}>La capitale dell'olio · 40°59′N 16°41′E</div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Contact = Contact;