// ContactPage.jsx — pagina Contatti
function ContactPage({ onNavigate }) {
  return (
    <main>
      <ContactHero />
      <ContactBody />
    </main>
  );
}

/* SEZIONE 1 — Headline */
function ContactHero() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FFFFFF, #F7F3EF)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.4, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', padding: '88px 32px 64px' }}>
        <div style={{ maxWidth: 880 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 16 }}>Contatti · Carmagnola</div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-1.2px', color: '#1A1A1A', marginBottom: 24, textWrap: 'balance' }}>
            <span className="ds-grad-text">Siamo qui</span>.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: '#3a3a3a', maxWidth: 720 }}>
            Passa quando vuoi. Se vuoi prenotare o hai una domanda, siamo raggiungibili per telefono e su Instagram.
          </p>
        </div>
      </div>
    </section>
  );
}

/* SEZIONE 2 — Info + Mappa + Form */
function ContactBody() {
  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div className="contact-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 32, alignItems: 'stretch' }}>
          <ContactInfoCard />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <ContactForm />
            <ContactMapCard />
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactInfoCard() {
  const rows = [
    { icon: <Icon.Pin size={18} color="#E8621A"/>, label: 'Indirizzo', value: 'Corso Sacchirone, 13\n10022 Carmagnola (TO)' },
    { icon: <Icon.Phone size={18} color="#E8621A"/>, label: 'Telefono', value: '011 972 1717', href: 'tel:0119721717' },
  ];
  const hours = [
    ['Lunedì', '14:00 – 20:00', false],
    ['Martedì', '09:00 – 20:00', false],
    ['Mercoledì', '09:00 – 20:00', false],
    ['Giovedì', '09:00 – 20:00', false],
    ['Venerdì', '09:00 – 20:00', false],
    ['Sabato', '09:00 – 20:00', false],
    ['Domenica', 'Chiuso', true],
  ];

  return (
    <div style={{ background: '#FFFFFF', borderRadius: 20, padding: '36px 36px 32px', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', border: '1px solid #F4EFE7' }}>
      <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Dove ci trovi</div>
      <h3 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 26, color: '#1A1A1A', marginBottom: 28 }}>Informazioni</h3>

      <div style={{ display: 'grid', gap: 20, marginBottom: 28 }}>
        {rows.map((r) => (
          <div key={r.label} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <span style={{ width: 36, height: 36, borderRadius: 999, background: '#FFF5E8', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{r.icon}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#6B6B6B', marginBottom: 4 }}>{r.label}</div>
              {r.href
                ? <a href={r.href} style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 18, color: '#1A1A1A', whiteSpace: 'pre-line' }}>{r.value}</a>
                : (r.placeholder
                    ? <PHA>{r.value}</PHA>
                    : <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 18, color: '#1A1A1A', lineHeight: 1.35, whiteSpace: 'pre-line' }}>{r.value}</div>)
              }
            </div>
          </div>
        ))}
      </div>

      {/* Hours */}
      <div style={{ height: 1, background: '#F0EBE5', margin: '4px 0 24px' }} />
      <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#E8621A', marginBottom: 16 }}>Orari</div>
      <div style={{ display: 'grid', gap: 8 }}>
        {hours.map(([d, h, closed], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: i < hours.length - 1 ? '1px dashed #F0EBE5' : 'none' }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#1A1A1A' }}>{d}</span>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 500, color: closed ? '#C8281E' : '#1A1A1A' }}>{h}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ContactMapCard() {
  return (
    <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', minHeight: 280, background: 'var(--ds-grad-alba-diag)', boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.5, pointerEvents: 'none' }} />
      {/* Faux map grid */}
      <svg viewBox="0 0 600 400" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.55 }}>
        <defs>
          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#C4A882" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="600" height="400" fill="url(#grid)" />
        {/* Roads */}
        <path d="M -50 200 L 650 250" stroke="#FFFFFF" strokeWidth="14" opacity="0.65"/>
        <path d="M -50 200 L 650 250" stroke="#D4C5B5" strokeWidth="1"/>
        <path d="M 280 -50 L 320 450" stroke="#FFFFFF" strokeWidth="10" opacity="0.65"/>
        <path d="M 280 -50 L 320 450" stroke="#D4C5B5" strokeWidth="1"/>
        <path d="M 0 80 Q 200 100 400 60 T 700 90" stroke="#FFFFFF" strokeWidth="8" opacity="0.5" fill="none"/>
        {/* Blocks */}
        <rect x="80" y="80" width="120" height="80" fill="#FFFFFF" opacity="0.6" rx="4"/>
        <rect x="380" y="280" width="160" height="90" fill="#FFFFFF" opacity="0.6" rx="4"/>
        <rect x="80" y="280" width="100" height="60" fill="#FFFFFF" opacity="0.6" rx="4"/>
      </svg>
      {/* Pin */}
      <div style={{ position: 'absolute', top: '46%', left: '50%', transform: 'translate(-50%, -100%)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ background: '#FFFFFF', padding: '8px 12px', borderRadius: 10, boxShadow: '0 4px 16px rgba(0,0,0,0.15)', marginBottom: 4, whiteSpace: 'nowrap' }}>
          <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 12, color: '#1A1A1A' }}>Deux Soleil</div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: '#6B6B6B' }}>Corso Sacchirone 13</div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: '50% 50% 50% 0', background: 'var(--ds-grad-tramonto)', transform: 'rotate(-45deg)', boxShadow: '0 4px 12px rgba(132,20,16,0.4)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ transform: 'rotate(45deg)', fontSize: 16 }}>☀️</span>
        </div>
      </div>
      {/* Placeholder ribbon */}
      <div style={{ position: 'absolute', top: 16, left: 16, padding: '6px 12px', borderRadius: 6, background: 'rgba(255,255,255,0.95)', boxShadow: '0 2px 8px rgba(0,0,0,0.06)' }}>
        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#85240E' }}>Placeholder · Google Maps</span>
      </div>
      <a href="https://www.google.com/maps/search/?api=1&query=Corso+Sacchirone+13+Carmagnola"
         target="_blank" rel="noopener"
         style={{ position: 'absolute', right: 16, bottom: 16, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 16px', borderRadius: 10, background: '#FFFFFF', boxShadow: '0 4px 16px rgba(0,0,0,0.10)', fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 13, color: '#1A1A1A' }}>
        <Icon.Pin size={14} color="#E8621A"/> Apri in Google Maps
      </a>
    </div>
  );
}

function ContactForm() {
  const channels = [
    {
      key: 'phone',
      href: 'tel:0119721717',
      bg: 'linear-gradient(135deg, #F5A623, #E8621A 55%, #C8281E)',
      eyebrow: 'Chiama Franco',
      title: '011 972 1717',
      icon: <Icon.Phone size={22} color="#fff" />,
    },
    {
      key: 'ig',
      href: 'https://instagram.com/deuxsolei_carmagnola',
      target: '_blank',
      bg: 'linear-gradient(135deg, #C8281E, #A8420E 55%, #851410)',
      eyebrow: 'Scrivici su Instagram',
      title: '@deuxsolei_carmagnola',
      icon: <Icon.Instagram size={22} color="#fff" />,
    },
    {
      key: 'fb',
      href: 'https://facebook.com/Deuxsolei',
      target: '_blank',
      bg: 'linear-gradient(135deg, #C4780A, #A8420E 55%, #851410)',
      eyebrow: 'Trovaci su Facebook',
      title: '/Deuxsolei',
      icon: <Icon.Facebook size={22} color="#fff" />,
    },
  ];

  return (
    <div style={{ background: '#FFFFFF', borderRadius: 20, padding: '36px 36px 32px', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', border: '1px solid #F4EFE7', display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div>
        <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Scrivici</div>
        <h3 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 26, color: '#1A1A1A', marginBottom: 10 }}>Parliamone direttamente.</h3>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, lineHeight: 1.6, color: '#6B6B6B' }}>
          Niente moduli, niente attese. Per prenotare o fare una domanda, chiama Franco o scrivici su Instagram — ti rispondiamo direttamente noi.
        </p>
      </div>

      <div style={{ display: 'grid', gap: 12 }}>
        {channels.map((c) => (
          <a key={c.key} href={c.href} target={c.target || undefined} rel={c.target ? 'noopener' : undefined}
             style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', gap: 16, padding: '18px 20px', borderRadius: 14, background: c.bg, boxShadow: '0 6px 20px rgba(132,20,16,0.18)', textDecoration: 'none' }}>
            <span style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', opacity: 0.5, pointerEvents: 'none' }} />
            <span style={{ position: 'relative', width: 48, height: 48, borderRadius: 12, background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {c.icon}
            </span>
            <span style={{ position: 'relative', flex: 1, minWidth: 0 }}>
              <span style={{ display: 'block', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', marginBottom: 4 }}>{c.eyebrow}</span>
              <span style={{ display: 'block', fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 20, color: '#fff', lineHeight: 1.15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.title}</span>
            </span>
            <Icon.Arrow size={18} color="#fff" />
          </a>
        ))}
      </div>

      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12.5, lineHeight: 1.55, color: '#6B6B6B', textAlign: 'center', marginTop: 4 }}>
        Oppure passa da noi: Corso Sacchirone 13, Carmagnola.
      </p>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: 0.5, color: '#6B6B6B', marginBottom: 6, textTransform: 'uppercase' }}>{label}</span>
      {children}
    </label>
  );
}
const inputStyle = {
  width: '100%',
  padding: '12px 16px',
  border: '1.5px solid #D4C5B5',
  borderRadius: 10,
  fontFamily: "'DM Sans', sans-serif",
  fontSize: 14.5,
  color: '#1A1A1A',
  background: '#FFFFFF',
  outline: 'none',
  transition: 'border-color 240ms',
};

/* SEZIONE 4 — Social strip */
function ContactSocialStrip() {
  return (
    <section style={{ background: '#FFFFFF', padding: '24px 0 88px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="social-row">
          <a href="https://instagram.com/deuxsolei_carmagnola" target="_blank" rel="noopener"
             style={socialCardStyle('linear-gradient(135deg, #F5A623, #E8621A 60%, #C8281E)')}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon.Instagram size={22} color="#fff"/>
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 4 }}>Instagram</div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 18, color: '#fff' }}>@deuxsolei_carmagnola</div>
              </div>
              <Icon.Arrow size={18} color="#fff"/>
            </div>
          </a>
          <a href="https://facebook.com/Deuxsolei" target="_blank" rel="noopener"
             style={socialCardStyle('linear-gradient(135deg, #C4780A, #A8420E, #851410)')}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon.Facebook size={22} color="#fff"/>
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 4 }}>Facebook</div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 18, color: '#fff' }}>/Deuxsolei</div>
              </div>
              <Icon.Arrow size={18} color="#fff"/>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function socialCardStyle(bg) {
  return {
    position: 'relative',
    overflow: 'hidden',
    padding: '24px 28px',
    borderRadius: 20,
    background: bg,
    boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
    transition: 'transform 240ms',
  };
}

Object.assign(window, { ContactPage });