// Home page sections for Silverio Estaleiro
const { useState, useEffect, useRef } = React;

// ---------- HERO PROJECT CAROUSEL (Toyota-style) ----------
const HERO_PROJECTS_PT = [
{ code: "SE/CAT-44", name: "Catamarã 44", type: "One-off · Compósito", spec: ["LOA 13.4 m", "Casco infusão epóxi", "Em construção · 2026"], cta: "Acompanhar obra", img: "assets/img-catamara-mar.jpg" },
{ code: "SE/HS-38", name: "HS 38", type: "Cruiser one-off · Compósito", spec: ["LOA 11.6 m", "Mobiliário 100% compósito", "Entregue · 2025"], cta: "Ver projeto", img: "assets/img-galpao-cat.jpg" },
{ code: "SE/KING-33", name: "Kingfish 33", type: "Lancha sport · Refit técnico", spec: ["LOA 10.0 m", "Refit completo · 11 meses", "Entregue · 2024"], cta: "Ver refit", img: "assets/img-bow-vinho.jpg" },
{ code: "SE/CAT-52", name: "Catamarã 52", type: "Charter · Refit & transformação", spec: ["LOA 15.8 m", "Reconfiguração ergonômica", "Em fase final · 2026"], cta: "Acompanhar", img: "assets/img-lancamento-drone.jpg" }];

const HERO_PROJECTS_EN = [
{ code: "SE/CAT-44", name: "Catamaran 44", type: "One-off · Composite", spec: ["LOA 13.4 m", "Epoxy infusion hull", "In build · 2026"], cta: "Follow the build", img: "assets/img-catamara-mar.jpg" },
{ code: "SE/HS-38", name: "HS 38", type: "One-off cruiser · Composite", spec: ["LOA 11.6 m", "100% composite furniture", "Delivered · 2025"], cta: "View project", img: "assets/img-galpao-cat.jpg" },
{ code: "SE/KING-33", name: "Kingfish 33", type: "Sport boat · Technical refit", spec: ["LOA 10.0 m", "Full refit · 11 months", "Delivered · 2024"], cta: "View refit", img: "assets/img-bow-vinho.jpg" },
{ code: "SE/CAT-52", name: "Catamaran 52", type: "Charter · Refit & transformation", spec: ["LOA 15.8 m", "Ergonomic reconfiguration", "Final phase · 2026"], cta: "Follow", img: "assets/img-lancamento-drone.jpg" }];


function HeroCarousel({ layout, onContact }) {
  const { t, lang } = useI18n();
  const projects = lang === 'pt' ? HERO_PROJECTS_PT : HERO_PROJECTS_EN;
  const [i, setI] = useState(0);
  const [auto, setAuto] = useState(true);
  useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setI((x) => (x + 1) % projects.length), 6500);
    return () => clearInterval(id);
  }, [auto, projects.length]);

  const p = projects[i];

  if (layout === 'split') {
    return (
      <section className="hero hero-split">
        <div className="shell">
          <div className="hero-split-grid">
            <div className="hero-split-text">
              <div className="eyebrow" style={{ marginBottom: 32 }}>{t.hero.eyebrow}</div>
              <h1 className="h-display" style={{ margin: '0 0 32px', maxWidth: '14ch' }}>{t.hero.title}</h1>
              <p className="body-lg" style={{ margin: '0 0 40px', maxWidth: '40ch' }}>{t.hero.sub}</p>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <a className="btn btn-primary" href="#projects">{t.hero.cta}<span className="arrow"></span></a>
                <button className="btn btn-ghost" onClick={onContact}>{t.hero.ctaSec}<span className="arrow"></span></button>
              </div>
            </div>
            <div className="hero-split-media">
              <Media src={p.img} code={p.code} meta={p.spec[2]} ratio="3/4" alt={p.name} />
              <div className="hero-split-strip">
                {projects.map((pj, idx) =>
                <button key={idx} className={"hero-strip-item" + (idx === i ? " active" : "")} onClick={() => {setI(idx);setAuto(false);}}>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em' }}>{String(idx + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 13 }}>{pj.name}</span>
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>);

  }

  // full-bleed video carousel
  return (
    <section className="hero hero-full">
      <div className="hero-media">
        <video src="assets/hero-video.mp4" autoPlay muted loop playsInline preload="metadata"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,12,12,0.55) 0%, rgba(8,12,12,0.15) 50%, rgba(8,12,12,0.85) 100%)' }}></div>
      </div>
      <div className="hero-overlay">
        <div className="shell">
          <div className="hero-full-content">
            <div className="eyebrow" style={{ marginBottom: 24, color: 'var(--paper)', opacity: 0.85 }}>{t.hero.eyebrow}</div>
            <h1 className="h-display" style={{ margin: '0 0 32px', maxWidth: '15ch', color: 'var(--paper)' }}>{t.hero.title}</h1>
            <p className="body-lg" style={{ margin: '0 0 40px', maxWidth: '42ch', color: 'color-mix(in srgb, var(--paper) 80%, transparent)' }}>{t.hero.sub}</p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="#projects">{t.hero.cta}<span className="arrow"></span></a>
              <button className="btn btn-ghost" onClick={onContact} style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }}>{t.hero.ctaSec}<span className="arrow"></span></button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- PILLARS ----------
function Pillars() {
  const { t } = useI18n();
  return (
    <section className="section" id="value">
      <div className="shell">
        <SectionHead eyebrow={t.pillars.eyebrow} title={t.pillars.title} sub={t.pillars.sub} />
        <div className="pillars-grid">
          {t.pillars.items.map((it, i) => {
            const imgs = [
            { src: "assets/img-projeto1.png", meta: "PROJETO\u00a0\u00b7\u00a0ENGENHARIA" },
            { src: "assets/img-reuniao.png", meta: "GEST\u00c3O\u00a0\u00b7\u00a0OBRA" },
            { src: "assets/img-interior-cozinha.jpg", meta: "ACABAMENTO\u00a0\u00b7\u00a0INTERIOR" }];

            const img = imgs[i] || imgs[0];
            return (
              <article key={i} className="pillar fade">
                <div className="pillar-num mono">{it.idx} / 03</div>
                <Media src={img.src} code={it.idx} meta={img.meta} ratio="4/3" alt={it.label} />
                <h3 className="h-3" style={{ margin: '24px 0 12px' }}>{it.label}</h3>
                <p className="body" style={{ margin: 0, maxWidth: '38ch' }}>{it.body}</p>
              </article>);

          })}
        </div>
      </div>
    </section>);

}

// ---------- SERVICES ----------
function Services() {
  const { t } = useI18n();
  return (
    <section className="section" id="services" style={{ background: 'var(--paper-2)' }}>
      <div className="shell">
        <SectionHead eyebrow={t.services.eyebrow} title={t.services.title} sub={t.services.sub} />
        <div className="services-grid">
          {t.services.list.map((s, i) => {
            const href = ["construcao.html", "refit.html", "design.html", "b2b.html"][i] || "#";
            return (
              <a key={i} className="service-card card fade" href={href}>
                <Media src={["assets/img-morenita0.jpeg", "assets/img-minotauro.jpeg", "assets/img-raku-render.jpeg", "assets/img-visita.jpg"][i] || "assets/img-morenita0.jpeg"} code={s.code} meta={["S/01", "S/02", "S/03", "S/04"][i]} ratio="4/3" alt={s.name} />
                <div className="service-body">
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{s.code}</div>
                  <h3 className="h-3" style={{ margin: '8px 0 12px' }}>{s.name}</h3>
                  <p className="body" style={{ margin: '0 0 24px' }}>{s.body}</p>
                  <span className="btn-link">{s.link} →</span>
                </div>
              </a>);

          })}
        </div>
      </div>
    </section>);

}

// ---------- DIFFERENTIATORS ----------
function Diff() {
  const { t } = useI18n();
  return (
    <section className="section" id="diff">
      <div className="shell">
        <SectionHead eyebrow={t.diff.eyebrow} title={t.diff.title} sub="" />
        <div className="diff-list">
          {t.diff.list.map((d, i) =>
          <article key={i} className="diff-row fade">
              <div className="diff-num mono">{d.n}</div>
              <h3 className="h-2" style={{ margin: 0, maxWidth: '18ch' }}>{d.t}</h3>
              <p className="body-lg" style={{ margin: 0, color: 'var(--ink-2)' }}>{d.b}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ---------- PROJECTS GRID ----------
const PROJECT_LIST_PT = [
{ code: "P/01", name: "Lady Alice", type: "Restauro e transforma\u00e7\u00e3o", year: "2026", tag: "EM OBRA", ratio: "4/5", img: "assets/img-lady1.jpeg" },
{ code: "P/02", name: "Morenita", type: "Constru\u00e7\u00e3o one-off", year: "2025", tag: "ENTREGUE", ratio: "16/10", img: "assets/img-morenita5.jpeg" },
{ code: "P/03", name: "Minotauro", type: "Refit", year: "2024", tag: "ENTREGUE", ratio: "4/5", img: "assets/img-minotauro1.jpeg" },
{ code: "P/04", name: "Raku D'Fiesta", type: "Constru\u00e7\u00e3o one-off", year: "2026", tag: "EM OBRA", ratio: "16/10", img: "assets/img-lancamento-drone.jpg" },
{ code: "P/05", name: "Entusiasmo", type: "Constru\u00e7\u00e3o one-off", year: "2025", tag: "ENTREGUE", ratio: "4/5", img: "assets/img-entusiasmo.jpeg" },
{ code: "P/06", name: "San Valentin", type: "Refit", year: "2024", tag: "ENTREGUE", ratio: "16/10", img: "assets/img-sanval.jpeg" }];

const PROJECT_LIST_EN = [
{ code: "P/01", name: "Catamaran 44", type: "One-off construction", year: "2026", tag: "IN BUILD", ratio: "4/5", img: "assets/img-lady1.jpeg" },
{ code: "P/02", name: "HS 38", type: "Construction \u00b7 delivered", year: "2025", tag: "DELIVERED", ratio: "16/10", img: "assets/img-morenita5.jpeg" },
{ code: "P/03", name: "Classic Wine", type: "Technical refit", year: "2024", tag: "DELIVERED", ratio: "4/5", img: "assets/img-minotauro1.jpeg" },
{ code: "P/04", name: "Catamaran 52", type: "Refit & transformation", year: "2026", tag: "IN BUILD", ratio: "16/10", img: "assets/img-lancamento-drone.jpg" },
{ code: "P/05", name: "Day Cruiser", type: "Finish & detailing", year: "2025", tag: "DELIVERED", ratio: "4/5", img: "assets/img-entusiasmo.jpeg" },
{ code: "P/06", name: "San Valentin", type: "Complete refit", year: "2024", tag: "DELIVERED", ratio: "16/10", img: "assets/img-sanval.jpeg" }];

// ---------- PROJECT GALLERIES (lightbox) ----------
const GALLERIES = {
  "P/01": [
    "assets/img-lady0.jpeg", "assets/img-lady01.jpeg",
    "assets/img-lady1.jpeg", "assets/img-lady2.jpeg", "assets/img-lady3.jpeg",
    "assets/img-lady5.jpeg", "assets/img-lady6.jpeg", "assets/img-lady7.jpeg",
    "assets/img-lady8.jpeg", "assets/img-lady9.jpeg",
    "assets/img-lady91.jpeg", "assets/img-lady92.jpeg", "assets/img-lady93.jpeg",
  ],
  "P/02": [
    "assets/img-morenita-topo.png",
    "assets/img-morenita0.jpeg", "assets/img-morenita1.jpeg", "assets/img-morenita2.jpeg",
    "assets/img-morenita3.jpeg", "assets/img-morenita4.jpeg", "assets/img-morenita5.jpeg",
    "assets/img-morenita6.jpeg", "assets/img-morenita7.jpeg", "assets/img-morenita8.jpeg",
    "assets/img-morenita9.jpeg", "assets/img-morenita91.jpeg",
  ],
  "P/03": [
    "assets/img-minotauro.jpeg", "assets/img-minotauro1.jpeg",
    "assets/img-minotauro2.jpeg", "assets/img-minotauro3.jpeg",
    "assets/img-minotauro4.jpeg", "assets/img-minotauro5.jpeg",
  ],
  "P/04": [
    "assets/img-raku-render.jpeg", "assets/img-raku-sol.jpeg",
    "assets/img-raku-int.jpeg", "assets/img-raku-galpao.jpeg", "assets/img-raku.jpg",
    "assets/img-raku1.jpg", "assets/img-raku2.jpg", "assets/img-raku3.jpeg",
    "assets/img-raku4.jpeg", "assets/img-raku5.jpeg", "assets/img-raku6.jpeg",
    "assets/img-raku7.jpeg", "assets/img-raku8.jpeg", "assets/img-raku9.jpeg",
    "assets/img-raku91.jpeg", "assets/img-raku92.jpeg", "assets/img-raku93.jpeg",
  ],
  "P/05": [
    "assets/img-entusiasmo.jpeg",
    "assets/img-entusiasmo1.jpeg", "assets/img-entusiasmo2.jpeg",
    "assets/img-entusiasmo3.jpeg", "assets/img-entusiasmo4.jpeg",
    "assets/img-entusiasmo5.jpeg", "assets/img-entusiasmo6.jpeg",
    "assets/img-entusiasmo7.jpeg",
  ],
  "P/06": [
    "assets/img-sanval.jpeg",
    "assets/img-sanval1.jpeg", "assets/img-sanval2.jpeg",
    "assets/img-sanval3.jpeg", "assets/img-sanval4.jpeg",
    "assets/img-sanval5.jpeg",
  ],
};

function Lightbox({ project, onClose }) {
  const [i, setI] = useState(0);
  const imgs = project ? (GALLERIES[project.code] || [project.img]) : [];
  const open = !!project;

  useEffect(() => { setI(0); }, [project && project.code]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      else if (e.key === 'ArrowRight') setI((x) => (x + 1) % imgs.length);
      else if (e.key === 'ArrowLeft') setI((x) => (x - 1 + imgs.length) % imgs.length);
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, imgs.length]);

  if (!project) return null;
  return (
    <div className={"lightbox" + (open ? " open" : "")} onClick={onClose} role="dialog" aria-modal="true" aria-label={project.name}>
      <div className="lightbox-bar" onClick={(e) => e.stopPropagation()}>
        <div className="meta">
          <span className="code">{project.code} · {project.year}</span>
          <h3>{project.name}</h3>
        </div>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
          <span className="counter">{String(i + 1).padStart(2, '0')} / {String(imgs.length).padStart(2, '0')}</span>
          <button className="lightbox-close" onClick={onClose} aria-label="Fechar">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
          </button>
        </div>
      </div>
      <div className="lightbox-stage" onClick={(e) => e.stopPropagation()}>
        <img src={imgs[i]} alt={project.name + ' — ' + (i + 1)} />
        {imgs.length > 1 && (
          <>
            <button className="lightbox-nav prev" onClick={() => setI((x) => (x - 1 + imgs.length) % imgs.length)} aria-label="Anterior">
              <svg viewBox="0 0 16 16" fill="none"><path d="M10 2L4 8l6 6" stroke="currentColor" strokeWidth="1.6" /></svg>
            </button>
            <button className="lightbox-nav next" onClick={() => setI((x) => (x + 1) % imgs.length)} aria-label="Próxima">
              <svg viewBox="0 0 16 16" fill="none"><path d="M6 2l6 6-6 6" stroke="currentColor" strokeWidth="1.6" /></svg>
            </button>
          </>
        )}
      </div>
      {imgs.length > 1 && (
        <div className="lightbox-thumbs" onClick={(e) => e.stopPropagation()}>
          {imgs.map((src, idx) => (
            <button key={src} className={"lightbox-thumb" + (idx === i ? " active" : "")} onClick={() => setI(idx)} aria-label={"Foto " + (idx + 1)}>
              <img src={src} alt="" />
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function Projects() {
  const { t, lang } = useI18n();
  const list = lang === 'pt' ? PROJECT_LIST_PT : PROJECT_LIST_EN;
  const [open, setOpen] = useState(null);
  return (
    <>
    <section className="section" id="projects">
      <div className="shell">
        <SectionHead eyebrow={t.projects.eyebrow} title={t.projects.title} sub={t.projects.sub} />
        <div className="projects-grid">
          {list.map((p, i) =>
          <a key={i} className={"project-card card fade r-" + p.ratio.replace('/', '-')} href="#" onClick={(e) => { e.preventDefault(); setOpen(p); }}>
              <Media src={p.img} code={p.code} meta={p.year} ratio={p.ratio} alt={p.name} />
              <div className="project-meta">
                <div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>{p.code}</div>
                  <h3 className="h-3" style={{ margin: '6px 0 4px' }}>{p.name}</h3>
                  <div className="body" style={{ margin: 0 }}>{p.type}</div>
                </div>
                <span className="btn-link">{t.projects.view} →</span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>
    <Lightbox project={open} onClose={() => setOpen(null)} />
    </>);

}

// ---------- B2B ----------
function B2B() {
  const { t } = useI18n();
  return (
    <section className="section" id="b2b" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="shell">
        <div className="section-head" style={{ borderBottom: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)', paddingBottom: 64, marginBottom: 64 }}>
          <div className="left">
            <div className="eyebrow" style={{ marginBottom: 24, color: 'color-mix(in srgb, var(--paper) 60%, transparent)' }}>{t.b2b.eyebrow}</div>
            <h2 className="h-1" style={{ margin: 0, maxWidth: '17ch', color: 'var(--paper)' }}>{t.b2b.title}</h2>
          </div>
          <div className="right body-lg" style={{ color: 'color-mix(in srgb, var(--paper) 75%, transparent)' }}>
            {t.b2b.sub}
          </div>
        </div>
        <div className="b2b-grid">
          {t.b2b.list.map((b, i) =>
          <article key={i} className="b2b-card fade">
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'color-mix(in srgb, var(--paper) 50%, transparent)' }}>{b.code}</div>
              <h3 className="h-3" style={{ margin: '20px 0 14px', color: 'var(--paper)' }}>{b.t}</h3>
              <p className="body" style={{ margin: 0, color: 'color-mix(in srgb, var(--paper) 65%, transparent)' }}>{b.b}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ---------- ABOUT ----------
function About() {
  const { t } = useI18n();
  return (
    <section className="section" id="about">
      <div className="shell">
        <div className="about-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{t.about.eyebrow}</div>
            <h2 className="h-1" style={{ margin: '0 0 32px', maxWidth: '14ch' }}>{t.about.title}</h2>
            <p className="body-lg" style={{ margin: '0 0 32px', maxWidth: '52ch' }}>{t.about.body}</p>
            <a className="btn-link" href="quemsomos.html">{t.about.cta} →</a>
          </div>
          <Media src="assets/img-lancamento-drone.jpg" code="ABOUT/01" meta="TIJUCAS\u00a0\u00b7\u00a0SC" ratio="4/5" alt="Lançamento Tijucas" />
        </div>
      </div>
    </section>);

}

// ---------- CTA ----------
function FinalCTA({ onContact, onVisit }) {
  const { t } = useI18n();
  return (
    <section className="section cta-section" style={{ background: 'var(--green)', color: 'white', borderTop: 0 }}>
      <div className="shell">
        <div className="cta-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, color: 'rgba(255,255,255,0.7)' }}>{t.cta.eyebrow}</div>
            <h2 className="h-display" style={{ margin: '0 0 32px', maxWidth: '14ch', color: 'white' }}>{t.cta.title}</h2>
            <p className="body-lg" style={{ margin: '0 0 40px', maxWidth: '46ch', color: 'rgba(255,255,255,0.85)' }}>{t.cta.sub}</p>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <button className="btn" onClick={onContact} style={{ background: 'white', color: 'var(--green-deep)' }}>{t.cta.btn}<span className="arrow"></span></button>
              <button className="btn btn-ghost" onClick={onVisit} style={{ borderColor: 'white', color: 'white' }}>{t.cta.btnSec}<span className="arrow"></span></button>
            </div>
          </div>
          <div className="cta-aside">
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', opacity: 0.8 }}>RESPOSTA / ATÉ 48H</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', opacity: 0.8, marginTop: 12 }}>WHATSAPP · +55 47 99120 8818</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', opacity: 0.8, marginTop: 12 }}>silvana.silverio@silverioestaleiro.com.br</div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HeroCarousel, Pillars, Services, Diff, Projects, B2B, About, FinalCTA });