const navStyles = {
  nav: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '1.25rem 4rem',
  },
  logo: { display: 'inline-flex', alignItems: 'center', textDecoration: 'none' },
  logoImg: { height: 28, width: 'auto', display: 'block', transition: 'filter .3s' },
  cta: {
    fontSize: '0.8rem', letterSpacing: '.12em', textTransform: 'uppercase',
    padding: '.55rem 1.6rem', textDecoration: 'none',
    transition: 'background .25s, color .25s, border-color .25s',
    background: 'transparent', cursor: 'pointer', border: '1px solid',
  },
};

function Nav() {
  const navRef = React.useRef(null);
  const [hover, setHover] = React.useState(false);
  const [light, setLight] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      if (!navRef.current) return;
      const p = Math.min(1, Math.max(0, window.scrollY / (window.innerHeight * 0.45)));
      navRef.current.style.setProperty('--glass-opacity', p);
      const r = `${p * 24}px`;
      navRef.current.style.borderBottomLeftRadius = r;
      navRef.current.style.borderBottomRightRadius = r;

      const headerH = navRef.current.offsetHeight;
      let isLight = false;
      document.querySelectorAll('[data-cream]').forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.top <= headerH && rect.bottom >= headerH) isLight = true;
      });
      setLight(isLight);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const logoFilter = light ? 'brightness(0)' : 'brightness(0) invert(1)';
  const ctaColor = 'var(--bg)';
  const ctaBg = hover ? 'var(--gold-light)' : 'var(--gold)';
  const ctaBorder = ctaBg;

  return (
    <nav ref={navRef} className="nav-glass nav-bar" style={navStyles.nav}>
      <a href="#" style={navStyles.logo} aria-label="REnderia">
        <img src="../../assets/renderia-logo.svg" alt="REnderia" style={{ ...navStyles.logoImg, filter: logoFilter }} />
      </a>
      <a href="#registrati"
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ ...navStyles.cta, background: ctaBg, color: ctaColor, borderColor: ctaBorder }}>
        Registrati
      </a>
    </nav>
  );
}

window.Nav = Nav;
const heroStyles = {
  hero: {
    position: 'relative', height: '100vh',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    textAlign: 'center', padding: '8rem 2rem 4rem', overflow: 'hidden',
  },
  bgWrap: {
    position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0,
  },
  bgIframe: {
    position: 'absolute',
    top: '50%', left: '50%',
    width: '177.78vh',
    height: '56.25vw',
    minWidth: '100%', minHeight: '100%',
    transform: 'translate(-50%, -50%)',
    border: 0, pointerEvents: 'none',
  },
  bgOverlay: {
    position: 'absolute', inset: 0,
    background:
      'linear-gradient(to bottom, rgba(8,7,6,0.78) 0%, rgba(8,7,6,0.62) 40%, rgba(8,7,6,0.95) 100%), ' +
      'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(8,7,6,0.35) 0%, rgba(8,7,6,0.55) 100%), ' +
      'radial-gradient(ellipse 60% 55% at 50% 60%, rgba(201,169,110,0.07) 0%, transparent 70%), ' +
      'radial-gradient(ellipse 80% 40% at 50% 100%, rgba(201,169,110,0.04) 0%, transparent 60%)',
    pointerEvents: 'none', zIndex: 1,
  },
  content: { position: 'relative', zIndex: 2 },
  eyebrow: {
    fontSize: '0.72rem', letterSpacing: '.25em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '2rem',
    display: 'flex', alignItems: 'center', gap: '1rem', justifyContent: 'center',
    maxWidth: 'none', whiteSpace: 'nowrap',
    animation: 'fadeUp .8s .2s forwards', opacity: 0,
  },
  rule: { content: '""', display: 'block', width: 40, height: 1, background: 'var(--border)' },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2.5rem, 6vw, 5rem)', fontWeight: 700, lineHeight: 1.0,
    letterSpacing: '-0.02em', marginBottom: '16px',
    animation: 'fadeUp .9s .4s forwards', opacity: 0,
  },
  sub: {
    fontSize: 'clamp(1rem, 2vw, 1.25rem)', fontWeight: 300,
    color: 'var(--fg-muted)', maxWidth: 720, margin: '0 auto 3.5rem',
    animation: 'fadeUp .9s .6s forwards', opacity: 0,
  },
  meta: {
    display: 'flex', gap: '3rem', alignItems: 'center', justifyContent: 'center',
    flexWrap: 'wrap', marginBottom: '3.5rem',
    animation: 'fadeUp .9s .7s forwards', opacity: 0,
  },
  metaLabel: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '.3rem',
  },
  metaValue: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.4rem', fontWeight: 400, color: 'var(--fg)',
  },
  metaSep: { width: 1, height: 48, background: 'var(--border)' },
  cta: {
    display: 'inline-block', background: 'var(--gold)', color: 'var(--bg)',
    fontSize: '0.8rem', letterSpacing: '.15em', textTransform: 'uppercase',
    padding: '.9rem 3rem', textDecoration: 'none', fontWeight: 500,
    transition: 'background .25s, transform .2s',
    animation: 'fadeUp .9s .85s forwards', opacity: 0,
  },
  scroll: {
    position: 'absolute', bottom: '2.5rem', left: '50%',
    transform: 'translateX(-50%)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '.5rem',
    fontSize: '0.65rem', letterSpacing: '.18em', textTransform: 'uppercase',
    color: 'var(--fg-muted)', zIndex: 2,
    animation: 'fadeUp .9s 1.2s forwards', opacity: 0,
  },
  scrollLine: { width: 1, height: 40, background: 'var(--border)', display: 'block', animation: 'pulse 2s infinite' },
};

function Hero() {
  const heroRef = React.useRef(null);
  const contentRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (!heroRef.current) return;
      const p = Math.min(1, window.scrollY / (window.innerHeight * 0.4));
      const r = `${p * 72}px`;
      heroRef.current.style.borderBottomLeftRadius = r;
      heroRef.current.style.borderBottomRightRadius = r;
      if (contentRef.current) {
        contentRef.current.style.opacity = Math.max(0, 1 - p * 1.5);
        contentRef.current.style.transform = `translateY(${p * -60}px)`;
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const vimeoSrc = 'https://player.vimeo.com/video/1189442150?h=fe722fccb2&background=1&autoplay=1&loop=1&muted=1&autopause=0&controls=0&dnt=1';
  return (
    <header ref={heroRef} className="hero-block" style={heroStyles.hero}>
      <div style={heroStyles.bgWrap}>
        <iframe src={vimeoSrc} allow="autoplay; fullscreen" style={heroStyles.bgIframe} title="REnderia Day background" />
      </div>
      <div style={heroStyles.bgOverlay} />

      <div ref={contentRef} style={heroStyles.content}>
        <p className="hero-eyebrow" style={heroStyles.eyebrow}>
          <span style={heroStyles.rule}></span>
          Il mercato immobiliare sta cambiando. Sei pronto?
          <span style={heroStyles.rule}></span>
        </p>

        <h1 style={heroStyles.title}>
          REnderia<br/><em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>Day</em>
        </h1>

        <p className="hero-sub" style={heroStyles.sub}>
          Un evento per chi vende e costruisce immobili e vuole capire dove sta andando il mercato e come trasformare quel cambiamento in vantaggio competitivo.
        </p>

        <div className="hero-meta" style={heroStyles.meta}>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Data</p>
            <p style={heroStyles.metaValue}>23 Giugno 2026</p>
          </div>
          <div className="hero-meta-sep" style={heroStyles.metaSep}></div>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Luogo</p>
            <p style={heroStyles.metaValue}>UNA Hotels MH · Matera</p>
          </div>
          <div className="hero-meta-sep" style={heroStyles.metaSep}></div>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Orario</p>
            <p style={heroStyles.metaValue}>18:00 – 20:00</p>
          </div>
        </div>

        <a href="#registrati" style={heroStyles.cta}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gold-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--gold)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
          Prenota il tuo posto →
        </a>
      </div>

      <div style={heroStyles.scroll}>
        <span style={heroStyles.scrollLine}></span>
      </div>
    </header>
  );
}

window.Hero = Hero;
const countdownStyles = {
  bar: {
    background: 'var(--bg-2)',
    borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
    padding: '2.5rem 4rem',
    display: 'flex', justifyContent: 'center', gap: '4rem', flexWrap: 'wrap',
  },
  unit: { textAlign: 'center' },
  num: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '3rem', fontWeight: 300, lineHeight: 1,
    color: 'var(--gold)', display: 'block',
  },
  label: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--fg-muted)', marginTop: '.4rem', display: 'block',
  },
};

function Countdown({ target = '2026-06-23T18:00:00' }) {
  const [t, setT] = React.useState({ d: '—', h: '—', m: '—', s: '—' });
  React.useEffect(() => {
    const tgt = new Date(target);
    const tick = () => {
      const diff = tgt - new Date();
      if (diff <= 0) return setT({ d: '00', h: '00', m: '00', s: '00' });
      const pad = (n) => String(n).padStart(2, '0');
      setT({
        d: pad(Math.floor(diff / 86400000)),
        h: pad(Math.floor((diff % 86400000) / 3600000)),
        m: pad(Math.floor((diff % 3600000) / 60000)),
        s: pad(Math.floor((diff % 60000) / 1000)),
      });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [target]);
  return (
    <div className="countdown-bar" style={countdownStyles.bar}>
      {[['Giorni', t.d], ['Ore', t.h], ['Minuti', t.m], ['Secondi', t.s]].map(([l, n]) => (
        <div key={l} style={countdownStyles.unit}>
          <span className="countdown-num" style={countdownStyles.num}>{n}</span>
          <span style={countdownStyles.label}>{l}</span>
        </div>
      ))}
    </div>
  );
}

window.Countdown = Countdown;
const sectionStyles = {
  section: { padding: '7rem 4rem', maxWidth: 1200, margin: '0 auto' },
  band: { background: 'var(--bg-2)', maxWidth: '100%', padding: 0 },
  cream: { background: 'var(--cream)', maxWidth: '100%', padding: 0 },
  bandInner: { maxWidth: 1200, margin: '0 auto', padding: '7rem 4rem' },
  eyebrow: {
    fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '1.5rem',
  },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2rem, 4vw, 3.5rem)',
    fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px',
  },
  body: {
    fontSize: '1.05rem', color: 'var(--fg-muted)',
    maxWidth: 580, lineHeight: 1.6,
  },
  divider: { width: 40, height: 1, background: 'var(--border)', margin: '2rem 0' },
};

const SectionContext = React.createContext({ cream: false });

function Section({ band, cream, children, style }) {
  const inner = <SectionContext.Provider value={{ cream: !!cream }}>{children}</SectionContext.Provider>;
  if (cream) {
    return <div data-cream="1" style={sectionStyles.cream}><div className="section-inner" style={{ ...sectionStyles.bandInner, ...style }}>{inner}</div></div>;
  }
  if (band) {
    return <div style={sectionStyles.band}><div className="section-inner" style={{ ...sectionStyles.bandInner, ...style }}>{inner}</div></div>;
  }
  return <section style={{ ...sectionStyles.section, ...style }}>{inner}</section>;
}

function Eyebrow({ children, style, className }) {
  return <p className={className} style={{ ...sectionStyles.eyebrow, ...style }}>{children}</p>;
}
function Title({ children, style, className }) {
  const { cream } = React.useContext(SectionContext);
  return <h2 className={className} style={{ ...sectionStyles.title, color: cream ? 'var(--ink)' : 'var(--fg)', ...style }}>{children}</h2>;
}
function Body({ children, style, className }) {
  const { cream } = React.useContext(SectionContext);
  return <p className={className} style={{ ...sectionStyles.body, color: cream ? 'var(--ink-2)' : 'var(--fg-muted)', ...style }}>{children}</p>;
}
function Divider({ className }) {
  const { cream } = React.useContext(SectionContext);
  return <div className={className} style={{ ...sectionStyles.divider, background: cream ? 'var(--gold)' : 'var(--border)' }}></div>;
}
function Em({ children }) {
  return <em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>{children}</em>;
}

Object.assign(window, { Section, Eyebrow, Title, Body, Divider, Em });
const conceptStyles = {
  visual: {
    position: 'relative', border: '1px solid var(--border)',
    aspectRatio: '16 / 11',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    overflow: 'hidden', background: '#000',
    borderRadius: 16,
  },
  glow: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at center, rgba(201,169,110,0.08) 0%, transparent 70%)',
  },
  inner: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    color: 'rgba(201,169,110,0.12)', fontWeight: 300,
    letterSpacing: '-.05em', lineHeight: 1, textAlign: 'center',
    position: 'relative', zIndex: 1,
  },
  iframe: {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    border: 0,
  },
  videoEl: {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'cover',
    pointerEvents: 'none',
  },
  tag: {
    position: 'absolute', bottom: '1.5rem', left: '1.5rem',
    fontSize: '0.65rem', letterSpacing: '.18em', textTransform: 'uppercase',
    color: 'var(--gold)', border: '1px solid var(--border)',
    padding: '.4rem 1rem',
    background: 'rgba(8,7,6,0.55)',
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    zIndex: 2,
  },
};

function ConceptVisual({ text, tag, size = '5rem', vimeoId, vimeoHash, videoSrc }) {
  const vimeoSrc = vimeoId
    ? `https://player.vimeo.com/video/${vimeoId}${vimeoHash ? `?h=${vimeoHash}&` : '?'}autoplay=1&muted=1&loop=1&autopause=0&controls=1&dnt=1&texttrack=it&pip=1`
    : null;

  return (
    <div style={{ ...conceptStyles.visual, aspectRatio: videoSrc ? '1 / 1' : conceptStyles.visual.aspectRatio }}>
      {videoSrc ? (
        <video src={videoSrc} autoPlay muted loop playsInline preload="metadata" style={conceptStyles.videoEl} />
      ) : vimeoSrc ? (
        <iframe src={vimeoSrc} allow="autoplay; fullscreen; picture-in-picture" style={conceptStyles.iframe} title={tag || 'Video'} />
      ) : (
        <>
          <div style={conceptStyles.glow}></div>
          <div style={{ ...conceptStyles.inner, fontSize: size }} dangerouslySetInnerHTML={{ __html: text }} />
        </>
      )}
      {tag && <div style={conceptStyles.tag}>{tag}</div>}
    </div>
  );
}

window.ConceptVisual = ConceptVisual;
const agendaStyles = {
  list: { marginTop: '3rem' },
  item: {
    display: 'grid', gridTemplateColumns: '120px 1fr',
    gap: '2rem', padding: '1.8rem 0',
    borderBottom: '1px solid var(--border)',
    alignItems: 'start',
  },
  time: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.6rem', fontWeight: 300, color: 'var(--gold)',
    lineHeight: 1, paddingTop: '.1rem',
  },
  title: { fontSize: '1rem', fontWeight: 500, marginBottom: '.35rem', color: 'var(--fg)' },
  desc: { fontSize: '.9rem', color: 'var(--fg-muted)', lineHeight: 1.6 },
};

const ITEMS = [
  ['01', 'Registrazioni e accoglienza', "Arrivo dei partecipanti, welcome drink e primo confronto informale."],
  ['02', 'Il mercato immobiliare nel 2026: luci, ombre e opportunità aperte', "Un'analisi diretta dello stato del settore: cosa sta cambiando nelle aspettative del cliente, dove si gioca la differenza competitiva oggi per agenzie e costruttori, perché il processo di presentazione è diventato un fattore commerciale determinante."],
  ['03', 'Dal problema alla risposta: realtà virtuale e AI nel processo di vendita quotidiano', "Dati, casi concreti e una demo live: come la tecnologia VR e l'intelligenza artificiale stanno entrando nel real estate, senza richiedere investimenti fuori scala, senza rivoluzionare i processi esistenti."],
  ['04', 'REnderia Score: misura la tua competitività digitale', "Un momento interattivo per tutti i partecipanti. Compili il REnderia Score in sala e scopri il livello di maturità digitale del tuo processo di vendita, con un risultato da portare a casa e su cui costruire i prossimi passi."],
  ['05', 'Chiusura e networking', "Fine dei lavori. Aperitivo e incontri liberi con il team REnderia."],
];

function Agenda() {
  return (
    <div style={agendaStyles.list}>
      {ITEMS.map((it, i) => (
        <div key={it[0]} className="agenda-item" style={{
          ...agendaStyles.item,
          borderTop: i === 0 ? '1px solid var(--border)' : 'none',
        }}>
          <div style={agendaStyles.time}>{it[0]}</div>
          <div>
            <p style={agendaStyles.title}>{it[1]}</p>
            <p style={agendaStyles.desc}>{it[2]}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Agenda = Agenda;
const pillarStyles = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', marginTop: '3.5rem' },
  card: {
    border: '1px solid rgba(255,255,255,0.05)', padding: '2.5rem 2rem',
    background: 'var(--bg-2)', borderRadius: 16,
    transition: 'transform .4s cubic-bezier(0.22,1,0.36,1), border-color .3s',
    cursor: 'default',
  },
  num: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '2.2rem', fontWeight: 300, color: 'var(--fg-faint)',
    lineHeight: 1, marginBottom: '1rem', display: 'block', letterSpacing: '-.02em',
  },
  rule: { width: 40, height: 1, background: 'var(--gold)', marginBottom: 20 },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.3rem', fontWeight: 700, marginBottom: '.7rem', color: 'var(--fg)',
    letterSpacing: '-0.01em', lineHeight: 1.25,
  },
  desc: { fontSize: '.9rem', color: 'var(--fg-muted)', lineHeight: 1.5 },
};

const PILLARS = [
  ['01', "Design assistito dall'AI", "Chiedi all'AI integrata di creare la planimetria o arredare gli spazi in automatico."],
  ['02', 'Catalogo arredi certificato', 'Scegli gli arredi migliori da un catalogo esclusivo di brand selezionati e certificati.'],
  ['03', 'VR immersiva', "Genera con un click un'esperienza VR immersiva con un livello di qualità senza precedenti."],
];

function PillarGrid() {
  const [hover, setHover] = React.useState(-1);
  return (
    <div className="pillars-grid" style={pillarStyles.grid}>
      {PILLARS.map((p, i) => (
        <div key={p[0]}
          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
          style={{
            ...pillarStyles.card,
            borderColor: hover === i ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.05)',
            transform: hover === i ? 'translateY(-4px)' : 'translateY(0)',
          }}>
          <span style={pillarStyles.num}>{p[0]}</span>
          <div style={pillarStyles.rule} />
          <p style={pillarStyles.title}>{p[1]}</p>
          <p style={pillarStyles.desc}>{p[2]}</p>
        </div>
      ))}
    </div>
  );
}

window.PillarGrid = PillarGrid;
const audStyles = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1.5rem', marginTop: '3rem' },
  card: {
    background: 'var(--bg-2)', padding: '2.5rem 2rem',
    border: '1px solid rgba(255,255,255,0.05)', borderRadius: 16,
    transition: 'transform .4s cubic-bezier(0.22,1,0.36,1), border-color .3s',
  },
  tag: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '1rem', display: 'block',
  },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.6rem', fontWeight: 700, marginBottom: '.8rem', lineHeight: 1.1,
    letterSpacing: '-0.01em', color: 'var(--fg)',
  },
  desc: { fontSize: '.88rem', color: 'var(--fg-muted)', lineHeight: 1.5 },
  link: {
    display: 'inline-block', marginTop: '1.2rem',
    fontSize: '.78rem', letterSpacing: '.08em', textTransform: 'uppercase',
    color: 'var(--gold)', textDecoration: 'none',
    borderBottom: '1px solid var(--border)', paddingBottom: '.15rem',
    transition: 'border-color .25s, color .25s',
  },
};

const AUDIENCES = [
  ['Agenzie immobiliari', ['Acquisisci', 'più mandati'], "Differenziati già al sopralluogo. REnderia ti dà uno strumento concreto per acquisire più mandati e rendere ogni presentazione più coinvolgente e più memorabile.", 'Scopri come acquisire più mandati →'],
  ['Costruttori e sviluppatori', ['Vendi prima', 'della consegna'], "Fai vedere la casa, non il progetto. Con REnderia il cliente vive lo spazio prima che esista. Decide più velocemente.", 'Valorizza il tuo progetto in prevendita →'],
];

function AudienceGrid() {
  const [hov, setHov] = React.useState(-1);
  return (
    <div className="audience-grid" style={audStyles.grid}>
      {AUDIENCES.map((a, i) => (
        <div key={i}
          onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(-1)}
          style={{
            ...audStyles.card,
            borderColor: hov === i ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.05)',
            transform: hov === i ? 'translateY(-4px)' : 'translateY(0)',
          }}>
          <span style={audStyles.tag}>{a[0]}</span>
          <h3 style={audStyles.title}>{a[1][0]}<br/>{a[1][1]}</h3>
          <p style={audStyles.desc}>{a[2]}</p>
          <a href="#registrati"
            style={{ ...audStyles.link, color: hov === i ? 'var(--gold-light)' : 'var(--gold)', borderColor: hov === i ? 'var(--gold)' : 'var(--border)' }}>
            {a[3]}
          </a>
        </div>
      ))}
    </div>
  );
}

window.AudienceGrid = AudienceGrid;
const venueStyles = {
  grid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5rem', alignItems: 'center' },
  data: { display: 'flex', flexDirection: 'column', gap: '1.2rem' },
  row: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    paddingBottom: '1.2rem', borderBottom: '1px solid var(--border)',
  },
  key: { fontSize: '0.7rem', letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-muted)' },
  val: { fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: '1.3rem', fontWeight: 400, color: 'var(--fg)' },
};

const VENUE = [
  ['Data', '23 Giugno 2026', false],
  ['Sede', 'UNA Hotels MH Matera', false],
  ['Indirizzo', 'Via Germania SN, Matera', false],
  ['Registrazioni', '17:30', false],
  ['Inizio lavori', '18:00', false],
  ['Fine', '20:00', false],
  ['Ingresso', 'Gratuito · Su registrazione', true],
];

function VenueBlock() {
  return (
    <div className="venue-grid" style={venueStyles.grid}>
      <div>
        <p style={{ fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '1.5rem' }}>Dove e quando</p>
        <h2 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 'clamp(2rem, 4vw, 3.5rem)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px' }}>
          Matera,<br/><em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>23 Giugno</em>
        </h2>
        <div style={{ width: 40, height: 1, background: 'var(--border)', margin: '2rem 0' }}></div>
        <p style={{ fontSize: '1.05rem', color: 'var(--fg-muted)', maxWidth: 580, lineHeight: 1.6 }}>
          Una serata nel cuore della Città dei Sassi, all'UNA Hotels MH Matera. Un contesto fuori dall'ordinario per un evento che guarda avanti. I posti sono limitati.
        </p>
      </div>
      <div style={venueStyles.data}>
        {VENUE.map(([k, v, gold], i) => (
          <div key={k} style={{ ...venueStyles.row, borderBottom: i === VENUE.length - 1 ? 'none' : '1px solid var(--border)' }}>
            <span style={venueStyles.key}>{k}</span>
            <span style={{ ...venueStyles.val, color: gold ? 'var(--gold)' : 'var(--fg)' }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.VenueBlock = VenueBlock;
const partnerStyles = {
  intro: {
    fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase',
    color: 'var(--gold)', textAlign: 'center', marginBottom: 0,
    maxWidth: 'none', margin: '0 auto',
  },
  row: {
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexWrap: 'wrap', gap: '3rem', marginTop: '3rem',
    paddingTop: '3rem', borderTop: '1px solid var(--border)',
  },
  trustRow: { marginTop: '1.5rem', borderTop: 'none', paddingTop: 0 },
  trustLabel: {
    fontSize: '.7rem', letterSpacing: '.14em', textTransform: 'uppercase',
    color: 'var(--fg-muted)',
  },
  logo: {
    height: 56, width: 180,
    objectFit: 'contain', display: 'block',
    filter: 'brightness(0) invert(1)',
    opacity: 0.55,
    transition: 'opacity .3s',
  },
  sep: { width: 4, height: 4, borderRadius: '50%', background: 'var(--border)' },
};

function PartnerLogo({ src, alt }) {
  const [hov, setHov] = React.useState(false);
  return (
    <img src={src} alt={alt}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ ...partnerStyles.logo, opacity: hov ? 0.85 : 0.55 }} />
  );
}

function PartnersRow() {
  return (
    <>
      <p style={partnerStyles.intro}>Un progetto dalla joint venture di</p>
      <div className="partners-row" style={partnerStyles.row}>
        <PartnerLogo src="../../assets/partners/vection.svg" alt="Vection Technologies" />
        <span className="partner-sep" style={partnerStyles.sep}></span>
        <PartnerLogo src="../../assets/partners/natuzzi.png" alt="Natuzzi" />
      </div>
    </>
  );
}

window.PartnersRow = PartnersRow;
const formStyles = {
  section: {
    background: 'var(--bg-2)',
    borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
    textAlign: 'center', maxWidth: '100%',
  },
  inner: { maxWidth: 700, margin: '0 auto', padding: '8rem 2rem' },
  eyebrow: { fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '1.5rem' },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
    fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px',
  },
  body: { fontSize: '1rem', color: 'var(--fg-muted)', maxWidth: 460, margin: '0 auto 3rem' },
  form: { display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 440, margin: '0 auto' },
  input: {
    background: 'transparent', border: '1px solid var(--border)',
    color: 'var(--fg)', fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '.9rem', fontWeight: 300, padding: '.9rem 1.2rem',
    outline: 'none', transition: 'border-color .25s', appearance: 'none', width: '100%',
  },
  submit: {
    background: 'var(--gold)', color: 'var(--bg)', border: 'none', cursor: 'pointer',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '0.78rem', letterSpacing: '.15em', textTransform: 'uppercase',
    fontWeight: 500, padding: '1rem', transition: 'background .25s, transform .2s',
  },
  note: { fontSize: '.78rem', color: 'var(--fg-muted)', marginTop: '1rem', letterSpacing: '.04em' },
  error: { fontSize: '.95rem', color: '#ff9090', marginTop: '.75rem', padding: '.8rem 1rem', border: '1px solid rgba(255,144,144,0.3)', borderRadius: 4, background: 'rgba(255,144,144,0.08)' },
  honeypot: { position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 },
};

function FocusInput(props) {
  const [f, setF] = React.useState(false);
  return <input {...props}
    onFocus={(e) => { setF(true); props.onFocus && props.onFocus(e); }}
    onBlur={(e) => { setF(false); props.onBlur && props.onBlur(e); }}
    style={{ ...formStyles.input, borderColor: f ? 'var(--gold)' : 'var(--border)', ...(props.style || {}) }} />;
}

function RegistrationForm() {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setSubmitting(true);
    try {
      const res = await fetch('./contact.php', { method: 'POST', body: new FormData(e.target) });
      const data = await res.json();
      if (!data.success) throw new Error(data.message || 'Errore di invio');
      setSubmitted(true);
      if (typeof window.fbq === 'function') {
        window.fbq('track', 'Lead', { content_name: 'REnderia Day Registration' });
      }
    } catch (err) {
      setError("Qualcosa è andato storto. Riprova o scrivi a info@renderia.it");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div style={formStyles.section} id="registrati">
      <div className="form-inner" style={formStyles.inner}>
        <p style={formStyles.eyebrow}>Posti limitati</p>
        <h2 style={formStyles.title}>Prenota il tuo<br/>posto a <em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>Matera</em></h2>
        <p style={formStyles.body}>L'ingresso è gratuito, su registrazione. Compila il form per riservare la tua partecipazione al REnderia Day.</p>
        {submitted ? (
          <p style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: '1.6rem', color: 'var(--gold)' }}>Grazie. Ti contatteremo a breve.</p>
        ) : (
          <form style={formStyles.form} onSubmit={onSubmit}>
            <input type="text" name="website" style={formStyles.honeypot} tabIndex={-1} autoComplete="off" aria-hidden="true" />
            <div className="form-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <FocusInput type="text" name="firstName" placeholder="Nome" required />
              <FocusInput type="text" name="lastName" placeholder="Cognome" required />
            </div>
            <FocusInput type="text" name="role" placeholder="Ruolo" />
            <FocusInput type="text" name="company" placeholder="Azienda" />
            <FocusInput type="text" name="vat" placeholder="P. IVA" />
            <select name="sector" defaultValue="" style={{ ...formStyles.input, color: 'var(--fg-muted)', cursor: 'pointer' }}>
              <option value="" disabled>Settore di attività</option>
              <option>Agenzia immobiliare</option>
              <option>Costruttore</option>
              <option>Designer</option>
            </select>
            <FocusInput type="email" name="email" placeholder="Email" required />
            <FocusInput type="tel" name="phone" placeholder="Cellulare" />
            <FocusInput type="text" name="referral" placeholder="Chi ti ha segnalato l'evento?" />
            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: '.78rem', color: 'var(--fg-muted)', cursor: 'pointer', lineHeight: 1.5, textAlign: 'left', maxWidth: 'none', marginTop: '.5rem' }}>
              <input type="checkbox" name="privacy" required style={{ marginTop: 2, width: 14, height: 14, accentColor: 'var(--gold)', cursor: 'pointer', flexShrink: 0 }} />
              <span>Ho letto e accetto la <a href="https://www.iubenda.com/privacy-policy/79246773" target="_blank" rel="noreferrer" style={{ color: 'var(--gold)', textDecoration: 'underline' }}>privacy policy</a></span>
            </label>
            {error && <p style={formStyles.error}>{error}</p>}
            <button type="submit" disabled={submitting} style={{ ...formStyles.submit, opacity: submitting ? 0.6 : 1, cursor: submitting ? 'wait' : 'pointer' }}
              onMouseEnter={(e) => { if (!submitting) { e.currentTarget.style.background = 'var(--gold-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; } }}
              onMouseLeave={(e) => { if (!submitting) { e.currentTarget.style.background = 'var(--gold)'; e.currentTarget.style.transform = 'translateY(0)'; } }}>
              {submitting ? 'Invio in corso…' : 'Prenota il posto →'}
            </button>
          </form>
        )}
        <p style={formStyles.note}>Partecipazione gratuita · 23 giugno 2026 · Matera</p>
      </div>
    </div>
  );
}

window.RegistrationForm = RegistrationForm;
const faqStyles = {
  list: { marginTop: '3rem' },
  item: { borderBottom: '1px solid var(--border)' },
  button: {
    width: '100%', background: 'transparent', border: 'none',
    padding: '1.5rem 0', cursor: 'pointer', textAlign: 'left',
    display: 'grid', gridTemplateColumns: '60px 1fr 24px', gap: '1rem',
    alignItems: 'center',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
  },
  num: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.4rem', fontWeight: 300, color: 'var(--gold)',
    lineHeight: 1,
  },
  q: {
    fontSize: '1rem', fontWeight: 500, color: 'var(--fg)',
    lineHeight: 1.4,
  },
  toggle: {
    fontSize: '1.6rem', fontWeight: 200, color: 'var(--gold)',
    lineHeight: 1, transition: 'transform .3s ease',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  panel: {
    overflow: 'hidden',
    transition: 'max-height .4s cubic-bezier(0.22,1,0.36,1), opacity .3s ease, padding .3s ease',
  },
  a: {
    fontSize: '.95rem', color: 'var(--fg-muted)', lineHeight: 1.7,
    paddingLeft: '76px', paddingBottom: '1.5rem', paddingRight: '24px',
    margin: 0, maxWidth: 'none',
  },
};

const FAQS = [
  ['01', "L'evento ha un costo?", "No. La partecipazione al REnderia Day è gratuita, su registrazione."],
  ['02', "Quanto dura l'evento?", "L'evento inizia alle 18:00 e si conclude alle 20:00, seguito da un aperitivo di networking."],
  ['03', "Cosa serve per compilare il REnderia Score?", "Nulla di specifico. È un assessment rapido che compili in sala: cinque aree, dieci domande, risultato immediato."],
  ['04', "Le risposte al REnderia Score sono riservate?", "Sì. I risultati sono personali e vengono condivisi solo con il partecipante."],
  ['05', "Posso partecipare con un collega?", "Sì. È sufficiente che anche lui compili il form di registrazione."],
  ['06', "La demo live è accessibile a tutti i partecipanti?", "Sì. La demo è parte integrante del programma e aperta a tutti i presenti."],
  ['07', "Cosa succede dopo l'evento?", "Riceverai il tuo REnderia Score e potrai richiedere un approfondimento con il team per capire i prossimi passi concreti per la tua attività."],
  ['08', "Come posso annullare la registrazione?", <>Scrivi a <a href="mailto:marketing@vection-technologies.com?subject=Annullamento%20registrazione%20REnderia%20Day" style={{ color: 'var(--gold)', textDecoration: 'underline' }}>marketing@vection-technologies.com</a>. Se non puoi partecipare, ti chiediamo di comunicarcelo: i posti sono limitati e c'è chi è in lista d'attesa.</>],
];

function FAQ() {
  const [open, setOpen] = React.useState(-1);
  return (
    <div style={faqStyles.list}>
      {FAQS.map(([num, q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={num} className="faq-item" style={{
            ...faqStyles.item,
            borderTop: i === 0 ? '1px solid var(--border)' : 'none',
          }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={faqStyles.button} aria-expanded={isOpen}>
              <span style={faqStyles.num}>{num}</span>
              <span style={faqStyles.q}>{q}</span>
              <span style={{ ...faqStyles.toggle, transform: isOpen ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
            </button>
            <div style={{
              ...faqStyles.panel,
              maxHeight: isOpen ? 400 : 0,
              opacity: isOpen ? 1 : 0,
            }}>
              <p style={faqStyles.a}>{a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

window.FAQ = FAQ;
const ctaBlockStyles = {
  wrap: { textAlign: 'center', padding: '4rem 1.5rem', maxWidth: 'none' },
  eyebrow: {
    fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '1.5rem', maxWidth: 'none',
  },
  btn: {
    display: 'inline-block', background: 'var(--gold)', color: 'var(--bg)',
    fontSize: '0.85rem', letterSpacing: '.15em', textTransform: 'uppercase',
    padding: '1.1rem 3rem', textDecoration: 'none', fontWeight: 500,
    borderRadius: 2,
    transition: 'background .25s, transform .2s',
  },
};

function CtaBlock({ eyebrow, label = 'Prenota il tuo posto →', href = '#registrati' }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div style={ctaBlockStyles.wrap}>
      {eyebrow && <p style={ctaBlockStyles.eyebrow}>{eyebrow}</p>}
      <a href={href}
        onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{
          ...ctaBlockStyles.btn,
          background: hov ? 'var(--gold-light)' : 'var(--gold)',
          transform: hov ? 'translateY(-1px)' : 'translateY(0)',
        }}>
        {label}
      </a>
    </div>
  );
}

window.CtaBlock = CtaBlock;
const footerStyles = {
  footer: {
    background: 'var(--bg-2)',
    borderTop: '1px solid rgba(255,255,255,0.05)',
    padding: '64px 4rem',
  },
  inner: {
    maxWidth: 1300, margin: '0 auto',
    display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
    gap: 40, alignItems: 'start',
  },
  col: {
    color: 'var(--fg-muted)',
    fontSize: '0.82rem', lineHeight: 1.75, fontWeight: 300,
  },
  colRight: { textAlign: 'right' },
  brandImg: { maxWidth: 180, height: 'auto', opacity: 0.75, filter: 'brightness(0) invert(1)', display: 'block' },
  vat: { marginTop: 12, fontSize: '0.72rem', opacity: 0.35, color: 'inherit', maxWidth: 'none' },
  heading: {
    color: 'var(--fg)', fontWeight: 600, fontSize: '0.75rem',
    letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10,
    maxWidth: 'none',
  },
  colP: { fontSize: '0.82rem', color: 'inherit', maxWidth: 'none', fontWeight: 300, lineHeight: 1.75 },
  btnTop: {
    background: 'none', border: 'none',
    fontSize: '0.8rem', fontWeight: 400, letterSpacing: '0.04em',
    cursor: 'pointer', transition: 'color .2s',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    padding: 0,
  },
  bottom: {
    background: 'var(--bg)', borderTop: '1px solid rgba(255,255,255,0.04)',
    padding: '20px 4rem',
  },
  bottomInner: {
    maxWidth: 1300, margin: '0 auto',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    color: 'var(--fg-faint)', fontSize: '0.72rem',
    gap: 16, fontWeight: 300, flexWrap: 'wrap',
  },
  bottomP: { fontSize: '0.72rem', color: 'inherit', maxWidth: 'none' },
  link: { color: 'rgba(245,242,237,0.35)', transition: 'color .2s', textDecoration: 'none' },
  sep: { margin: '0 8px', opacity: 0.4 },
};

function BtnTop() {
  const [hov, setHov] = React.useState(false);
  return (
    <button onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      style={{ ...footerStyles.btnTop, color: hov ? 'var(--fg)' : 'var(--fg-muted)' }}>
      ↑ Torna su
    </button>
  );
}

function FooterLink({ href, children }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ ...footerStyles.link, color: hov ? 'var(--fg-muted)' : 'rgba(245,242,237,0.35)' }}>
      {children}
    </a>
  );
}

function Footer() {
  return (
    <>
      <footer className="footer-block" style={footerStyles.footer}>
        <div className="footer-inner-grid" style={footerStyles.inner}>
          <div style={footerStyles.col}>
            <img src="../../assets/renderia-logo.svg" alt="REnderia" style={footerStyles.brandImg} />
            <p style={footerStyles.vat}>Vat number: 03787621204</p>
          </div>
          <div style={footerStyles.col}>
            <p style={footerStyles.heading}>Vection Technologies</p>
            <p style={footerStyles.colP}>Via Roma 36, 40069<br/>Zola Predosa (BO) Italy</p>
          </div>
          <div style={footerStyles.col}>
            <p style={footerStyles.heading}>Contact</p>
            <p style={footerStyles.colP}>marketing@vection-technologies.com</p>
          </div>
          <div className="footer-col-right" style={{ ...footerStyles.col, ...footerStyles.colRight }}>
            <BtnTop />
          </div>
        </div>
      </footer>
      <div className="footer-bottom-block" style={footerStyles.bottom}>
        <div className="footer-bottom-inner" style={footerStyles.bottomInner}>
          <div>
            <FooterLink href="https://www.iubenda.com/privacy-policy/79246773">Privacy Policy</FooterLink>
            <span style={footerStyles.sep}>·</span>
            <FooterLink href="https://www.iubenda.com/privacy-policy/79246773/cookie-policy">Cookie Policy</FooterLink>
          </div>
          <p style={footerStyles.bottomP}>© 2026 REnderia — un brand di Vection Technologies e Natuzzi</p>
        </div>
      </div>
    </>
  );
}

window.Footer = Footer;