// Home page — reads from window.__C (content.json)

const _h = () => window.c('home.hero', {});
const _stats = () => window.c('home.stats', []);
const _trust = () => window.c('home.trust', {});
const _why = () => window.c('home.why', {});
const _comp = () => window.c('home.comparison', {});
const _pp = () => window.c('home.products_preview', {});
const _proc = () => window.c('home.process', {});
const _gal = () => window.c('home.gallery', {});
const _man = () => window.c('home.manifesto', {});

// Render image or placeholder slot
function Img({ src, label, ratio = '16/9', cobalt = false, style = {}, className = '' }) {
  if (src && (src.startsWith('assets/') || src.startsWith('http'))) {
    // Use image if it exists (with onError fallback)
    return (
      <div className={`ph ${cobalt ? 'ph-cobalt' : ''} ${className}`} style={{ aspectRatio: ratio, ...style, padding: 0 }}>
        <img
          src={src}
          alt={label}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }}
        />
        <span className="ph-label" style={{ display: 'none', position: 'absolute', inset: 0, alignItems: 'center', justifyContent: 'center', margin: 'auto', maxHeight: 30, maxWidth: 'fit-content' }}>{label}</span>
      </div>
    );
  }
  return <Placeholder label={label} ratio={ratio} cobalt={cobalt} style={style} className={className} />;
}

function HomeHero({ variant, setRoute }) {
  return (
    <section className="section" style={{ paddingTop: 'clamp(48px, 6vw, 96px)', paddingBottom: 'clamp(48px, 6vw, 96px)', position: 'relative' }}>
      <HouseDeco color="var(--cobalt)" opacity={0.05} count="sparse" />
      <div className="container" style={{ position: 'relative' }}>
        {variant === 'a' && <HeroA setRoute={setRoute} />}
        {variant === 'b' && <HeroB setRoute={setRoute} />}
        {variant === 'c' && <HeroC setRoute={setRoute} />}
      </div>
    </section>
  );
}

function HeroA({ setRoute }) {
  const h = _h();
  const t = _trust();
  return (
    <>
      <div className="hero-chiprow" style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, flexWrap: 'wrap' }}>
        <span className="chip"><span className="chip-dot"></span>{h.chip || '#1 prefab panel in indonesia'}</span>
        <span className="eyebrow">{h.eyebrow || 'Wall + floor panel system'}</span>
      </div>

      <h1 className="display" style={{ marginBottom: 0, whiteSpace: 'pre-line' }}>
        {h.headline_a || 'Built\ndifferent.'}
      </h1>

      <div className="grid-12 hero-grid" style={{ marginTop: 56, alignItems: 'end' }}>
        <div style={{ gridColumn: 'span 5' }} className="hero-textcol">
          <p style={{ fontSize: 'clamp(18px, 1.6vw, 24px)', lineHeight: 1.4, color: 'var(--muted)', maxWidth: 480 }}>
            {h.sub || "Indonesia's first building panel system engineered for primary structures."}
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a className="btn btn-primary" href="#products" onClick={(e) => { e.preventDefault(); setRoute('products'); }}>
              {h.cta_primary || 'Explore panels'} <span className="btn-arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="#contact" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>
              {h.cta_secondary || 'Request a quote'}
            </a>
          </div>
        </div>
        <div style={{ gridColumn: 'span 7' }} className="hero-imgcol">
          <Img src={h.image_main} label={h.image_main_label || 'Hero · finished myfab residence'} ratio="16/10" cobalt />
        </div>
      </div>

      {/* Triplet below hero */}
      <div className="grid-12 hero-triplet" style={{ marginTop: 32 }}>
        <div style={{ gridColumn: 'span 3' }} className="hero-trip-1">
          <Img src={h.image_install} label={h.image_install_label || 'Panel installation'} ratio="3/4" />
        </div>
        <div style={{ gridColumn: 'span 5' }} className="hero-trip-2">
          <Img src={h.image_joint} label={h.image_joint_label || 'Patented joint detail'} ratio="4/3" />
        </div>
        <div style={{ gridColumn: 'span 4', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 16 }} className="hero-trip-3">
          <div className="card-bordered" style={{ padding: 24 }}>
            <div className="eyebrow">{t.tested_title || 'Tested & certified by'}</div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6, fontWeight: 500 }}>
              {(t.tested_lines || []).map((l, i) => (
                <span key={i}>· {l}</span>
              ))}
            </div>
          </div>
          <div className="card-bordered" style={{ padding: 24, display: 'flex', alignItems: 'center', gap: 16 }}>
            <HouseSymbol size={40} color="var(--accent)" />
            <div>
              <div style={{ fontWeight: 500, fontSize: 16, lineHeight: 1.2 }}>100% Karya<br/>Anak Bangsa</div>
              <div style={{ color: 'var(--muted)', fontSize: 13, marginTop: 4 }}>Engineered & made in Indonesia</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function HeroB({ setRoute }) {
  const h = _h();
  return (
    <div className="grid-12 hero-grid" style={{ alignItems: 'stretch', minHeight: '60vh' }}>
      <div style={{ gridColumn: 'span 6', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '40px 0', gap: 40 }} className="hero-textcol">
        <div>
          <span className="chip"><span className="chip-dot"></span>{h.chip || '#1 prefab panel · indonesia'}</span>
        </div>
        <div>
          <h1 className="display" style={{ fontSize: 'clamp(64px, 12vw, 220px)', whiteSpace: 'pre-line' }}>
            {h.headline_b || 'Built\ndifferent.'}
          </h1>
          <p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.4, color: 'var(--muted)', maxWidth: 520, marginTop: 32 }}>
            {h.sub || ''}
          </p>
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#products" onClick={(e) => { e.preventDefault(); setRoute('products'); }}>
            {h.cta_primary || 'Explore panels'} <span className="btn-arrow">→</span>
          </a>
          <a className="btn btn-ghost" href="#contact" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>
            {h.cta_secondary || 'Talk to sales'}
          </a>
        </div>
      </div>
      <div style={{ gridColumn: 'span 6', position: 'relative' }} className="hero-imgcol">
        <Img src={h.image_main} label={h.image_main_label || 'Hero · architectural detail'} ratio="3/4" cobalt style={{ height: '100%' }} />
      </div>
    </div>
  );
}

function HeroC({ setRoute }) {
  const h = _h();
  return (
    <div style={{ textAlign: 'center', padding: '40px 0' }}>
      <span className="chip" style={{ marginBottom: 32 }}><span className="chip-dot"></span>{h.chip || '#1 prefab panel in indonesia'}</span>
      <h1 className="display" style={{ maxWidth: '14ch', margin: '0 auto', whiteSpace: 'pre-line' }}>
        {h.headline_c || 'We rebuild\nhow Indonesia builds.'}
      </h1>
      <p style={{ fontSize: 'clamp(17px, 1.8vw, 26px)', lineHeight: 1.4, color: 'var(--muted)', maxWidth: 640, margin: '40px auto 0' }}>
        {h.sub || ''}
      </p>
      <div style={{ display: 'flex', gap: 12, marginTop: 40, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a className="btn btn-primary" href="#products" onClick={(e) => { e.preventDefault(); setRoute('products'); }}>
          {h.cta_primary || 'Explore panels'} <span className="btn-arrow">→</span>
        </a>
        <a className="btn btn-ghost" href="#contact" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>
          {h.cta_secondary || 'Request a quote'}
        </a>
      </div>
      <div style={{ marginTop: 80 }}>
        <Img src={h.image_main} label={h.image_main_label || 'Hero · finished myfab residence wide'} ratio="21/9" cobalt />
      </div>
    </div>
  );
}

function StatStrip() {
  const stats = _stats();
  return (
    <section style={{ background: 'var(--midnight)', color: 'var(--rice)', padding: 'clamp(48px, 6vw, 96px) 0', position: 'relative', overflow: 'hidden' }}>
      <HouseDeco color="var(--dodger)" opacity={0.06} count="medium" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-12 stat-grid">
          {stats.map((s, i) => (
            <Reveal key={i} delay={i * 80} style={{ gridColumn: 'span 3' }} className="stat-cell">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div className="stat-num" style={{ color: 'var(--rice)' }}>
                  <Counter to={s.num} suffix={s.suffix} />
                </div>
                <div style={{ fontSize: 13, color: 'rgba(238,234,218,0.6)', textTransform: 'uppercase', letterSpacing: '0.12em', maxWidth: 220, lineHeight: 1.4 }}>
                  {s.label}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyMyfab() {
  const w = _why();
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 80, columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 7' }} className="sec-head-l">
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{w.eyebrow}</div>
              <h2>{w.headline}</h2>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 5' }} className="sec-head-r">
            <Reveal delay={120}>
              <p style={{ color: 'var(--muted)', fontSize: 'clamp(16px, 1.3vw, 18px)', lineHeight: 1.55 }}>{w.sub}</p>
            </Reveal>
          </div>
        </div>

        <div className="grid-12 pillar-grid">
          {(w.pillars || []).map((p, i) => (
            <Reveal key={i} delay={i * 80} style={{ gridColumn: 'span 3' }} className="pillar-cell">
              <div className="card-bordered" style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 280, gap: 24 }}>
                <div className="mono" style={{ fontSize: 13, color: 'var(--muted)', letterSpacing: '0.1em' }}>{p.num}</div>
                <div>
                  <h3 style={{ marginBottom: 12 }}>{p.title}</h3>
                  <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.5 }}>{p.body}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Comparison() {
  const cmp = _comp();
  return (
    <section className="section" style={{ background: 'var(--surface)', color: 'var(--surface-fg)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>{cmp.eyebrow}</div>
            <h2>{cmp.headline}</h2>
          </div>
        </div>

        <Reveal>
          <div style={{ overflowX: 'auto' }} className="no-scrollbar">
            <table className="spec-table" style={{ minWidth: 720 }}>
              <thead>
                <tr>
                  <th style={{ width: '24%' }}></th>
                  <th>Brick &amp; mortar</th>
                  <th>Common precast</th>
                  <th style={{ color: 'var(--accent)' }}>Myfab panels</th>
                </tr>
              </thead>
              <tbody>
                {(cmp.rows || []).map((r, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 500, fontSize: 16 }}>{r.label}</td>
                    <td style={{ color: 'var(--muted)' }}>{r.brick}</td>
                    <td style={{ color: 'var(--muted)' }}>{r.precast}</td>
                    <td style={{ color: 'var(--accent)', fontWeight: 500 }}>{r.myfab}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ProductsPreview({ setRoute }) {
  const pp = _pp();
  const items = pp.items || [];
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 7' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{pp.eyebrow}</div>
              <h2>{pp.headline}</h2>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 3', gridColumnStart: 10 }} className="sec-head-r">
            <Reveal delay={120}>
              <a className="link-arrow" href="#products" onClick={(e) => { e.preventDefault(); setRoute('products'); }}>
                See all specs →
              </a>
            </Reveal>
          </div>
        </div>

        <div className="grid-12 product-preview-grid" style={{ gap: 24 }}>
          {items.map((p, i) => (
            <Reveal key={i} delay={i * 100} style={{ gridColumn: 'span 4' }} className="product-preview-cell">
              <a
                href="#products"
                onClick={(e) => { e.preventDefault(); setRoute('products'); }}
                style={{ display: 'block', cursor: 'pointer' }}
              >
                <Img src={p.image} label={`${p.name} render`} ratio="4/5" cobalt={i === 1} />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 24, gap: 16, flexWrap: 'wrap' }}>
                  <div>
                    <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{p.tag}</div>
                    <h3 style={{ marginTop: 8, fontSize: 'clamp(28px, 3vw, 48px)' }}>{p.name}</h3>
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', textAlign: 'right' }}>{p.spec}</div>
                </div>
                <p style={{ marginTop: 16, color: 'var(--muted)', maxWidth: 540 }}>{p.body}</p>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessTimeline() {
  const pr = _proc();
  const phases = pr.phases || [];
  return (
    <section className="section" style={{ background: 'var(--midnight)', color: 'var(--rice)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 80 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16, color: 'rgba(238,234,218,0.6)' }}>{pr.eyebrow}</div>
              <h2 style={{ color: 'var(--rice)' }}>{pr.headline}</h2>
            </Reveal>
          </div>
        </div>

        <div className="grid-12 process-grid">
          {phases.map((p, i) => (
            <Reveal key={p.id} delay={i * 60} style={{ gridColumn: 'span 4' }} className="process-cell">
              <div style={{ padding: '32px 0', borderTop: '1px solid rgba(238,234,218,0.18)', height: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, gap: 8 }}>
                  <div className="mono" style={{ fontSize: 13, color: 'rgba(238,234,218,0.5)', letterSpacing: '0.1em' }}>{p.id}</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--dodger)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{p.day}</div>
                </div>
                <h3 style={{ color: 'var(--rice)', marginBottom: 12 }}>{p.title}</h3>
                <p style={{ color: 'rgba(238,234,218,0.7)', fontSize: 15, marginBottom: 16 }}>{p.body}</p>
                <div className="chip" style={{ borderColor: 'rgba(238,234,218,0.25)', color: 'rgba(238,234,218,0.85)', fontSize: 11 }}>
                  <HouseSymbol size={10} color="var(--dodger)" /> {p.who}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function GalleryPreview({ setRoute }) {
  const g = _gal();
  const cells = g.cells || [];
  const layout = [
    { c: 'span 6', r: 'span 2' },
    { c: 'span 3', r: 'span 1' },
    { c: 'span 3', r: 'span 1' },
    { c: 'span 3', r: 'span 1' },
    { c: 'span 3', r: 'span 1' },
    { c: 'span 6', r: 'span 1' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 7' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{g.eyebrow}</div>
              <h2>{g.headline}</h2>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 3', gridColumnStart: 10 }} className="sec-head-r">
            <Reveal delay={120}>
              <a className="link-arrow" href="#about" onClick={(e) => { e.preventDefault(); setRoute('about'); }}>
                See project gallery →
              </a>
            </Reveal>
          </div>
        </div>

        <Reveal>
          <div className="gallery-grid">
            {cells.map((cell, i) => (
              <div key={i} style={{ gridColumn: layout[i]?.c, gridRow: layout[i]?.r }} className="gallery-cell">
                <Img src={cell.image} label={cell.label} style={{ height: '100%', aspectRatio: 'auto' }} cobalt={i === 0} />
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Manifesto() {
  const m = _man();
  return (
    <section className="section" style={{ background: 'var(--cobalt)', color: 'var(--white)', position: 'relative', overflow: 'hidden' }}>
      <HouseDeco color="white" opacity={0.08} count="medium" />
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32 }}>
            <HouseSymbol size={28} color="white" />
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>{m.eyebrow}</div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h2 style={{ fontSize: 'clamp(36px, 6.5vw, 112px)', maxWidth: '18ch', lineHeight: 0.98 }}>
            {m.headline}
          </h2>
        </Reveal>
        <Reveal delay={240}>
          <div className="grid-12 manifesto-cols" style={{ marginTop: 80 }}>
            {(m.columns || []).map((col, i) => (
              <div key={i} style={{ gridColumn: 'span 4' }} className="manifesto-col">
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)' }}>{col.title}</div>
                <p style={{ marginTop: 12, fontSize: 17 }}>{col.body}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage({ setRoute, tweaks }) {
  return (
    <div className={`page page-fade house-overlay--${tweaks.houseOverlay}`}>
      <HomeHero variant={tweaks.heroVariant} setRoute={setRoute} />
      <StatStrip />
      <WhyMyfab />
      <Comparison />
      <ProductsPreview setRoute={setRoute} />
      <ProcessTimeline />
      <Manifesto />
    </div>
  );
}

Object.assign(window, { HomePage, Img });