// Home page
const { useState, useEffect, useRef } = React;

function Hero() {
  const { t } = useI18n();
  return (
    <section style={{ position: 'relative', minHeight: '100vh', color: 'var(--bone-50)', overflow: 'hidden' }}>
      {/* Background video — YouTube */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden', background: '#0a1424' }}>
        <iframe
          src="https://www.youtube.com/embed/nKMubhwiPmk?autoplay=1&mute=1&loop=1&playlist=nKMubhwiPmk&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&disablekb=1&enablejsapi=0"
          frameBorder="0"
          allow="autoplay; encrypted-media"
          allowFullScreen
          style={{
            position: 'absolute',
            top: '50%', left: '50%',
            transform: 'translate(-50%, -50%) scale(1.08)',
            width: '100vw',
            height: '56.25vw',
            minHeight: '100vh',
            minWidth: '177.77vh',
            pointerEvents: 'none',
            border: 'none',
          }}
        />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,20,36,0.75) 0%, rgba(10,20,36,0.60) 35%, rgba(10,20,36,0.95) 100%)',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at 30% 60%, rgba(23,51,95,0.25) 0%, transparent 60%)',
        }}/>
      </div>

      {/* content */}
      <div className="container" style={{
        position: 'relative', zIndex: 2,
        minHeight: '100vh',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        paddingTop: 140, paddingBottom: 120,
      }}>
        <div className="reveal-stagger in">
          <div className="eyebrow" style={{ color: 'rgba(250,248,244,0.7)', marginBottom: 32 }}>
            — {t.home.heroEyebrow}
          </div>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 9vw, 148px)', maxWidth: '16ch', marginBottom: 40 }}>
            {t.home.heroTitleA}<br/>
            <em style={{ fontStyle: 'italic', fontWeight: 400 }}>{t.home.heroTitleB}</em><br/>
            <span style={{ opacity: 0.75 }}>{t.home.heroTitleC}</span>
          </h1>
          <p style={{ fontSize: 'clamp(15px, 1.3vw, 19px)', lineHeight: 1.55, maxWidth: '52ch', color: 'rgba(250,248,244,0.85)', marginBottom: 48 }}>
            {t.home.heroSub}
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="quote.html" className="btn" style={{ background: 'var(--bone-50)', color: 'var(--kdc-navy-900)', border: '1px solid var(--bone-50)' }}>
              {t.home.heroCta1} <span className="btn-arrow">→</span>
            </a>
            <a href="projects.html" className="btn btn-ghost" style={{ color: 'var(--bone-50)', borderColor: 'rgba(250,248,244,0.4)' }}>
              {t.home.heroCta2}
            </a>
          </div>
        </div>
      </div>

      <div className="ticker">
        <span className="ticker-line"/>
        <span>{t.home.heroScroll}</span>
      </div>

    </section>
  );
}

function MetricsStrip() {
  const { t } = useI18n();
  return (
    <section className="container" style={{ padding: '80px 0 40px' }}>
      <div className="reveal-stagger" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 'clamp(20px, 3vw, 48px)',
        borderTop: '1px solid var(--line)',
        paddingTop: 48,
      }}>
        {t.home.metrics.map((m, i) => (
          <div key={i}>
            <div className="display" style={{ fontSize: 'clamp(44px, 5.5vw, 88px)', letterSpacing: '-0.03em' }}>{m.k}</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>{m.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Manifesto() {
  const { t } = useI18n();
  return (
    <section className="container">
      <div className="section-head">
        <div className="eyebrow">{t.home.manifestoEyebrow}</div>
        <div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(36px, 5vw, 72px)', maxWidth: '18ch', marginBottom: 32 }}>
            {t.home.manifestoTitle}
          </h2>
          <p className="body-lg reveal" style={{ maxWidth: '58ch' }}>
            {t.home.manifestoBody}
          </p>
        </div>
      </div>
      <div className="reveal-stagger" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(20px, 3vw, 48px)',
        padding: '24px 0 96px', borderTop: '1px solid var(--line-soft)', paddingTop: 48,
      }}>
        {t.home.manifestoCols.map((c, i) => (
          <div key={i}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>0{i+1}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(22px, 2vw, 30px)', letterSpacing: '-0.01em', marginBottom: 10 }}>
              {c.h}
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 }}>{c.b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ServicesTeaser() {
  const { t } = useI18n();
  const teaser = t.services.items.slice(0, 8);
  return (
    <section className="container">
      <div className="section-head">
        <div className="eyebrow">{t.home.servicesEyebrow}</div>
        <h2 className="display reveal" style={{ fontSize: 'clamp(40px, 6vw, 96px)', maxWidth: '18ch', whiteSpace: 'pre-line' }}>
          {t.home.servicesTitle}
        </h2>
      </div>
      <div className="reveal-stagger" style={{ borderTop: '1px solid var(--line)' }}>
        {teaser.map((s, i) => (
          <a key={i} href="services.html" className="service-row">
            <span className="service-row-num">{s.tag}</span>
            <span className="service-row-title">{s.t}</span>
            <span className="service-row-desc">{s.d}</span>
            <span className="service-row-arr">→</span>
          </a>
        ))}
      </div>
      <div style={{ padding: '48px 0 120px', display: 'flex', justifyContent: 'flex-end' }}>
        <a href="services.html" className="link-inline">{t.home.servicesView} →</a>
      </div>
    </section>
  );
}

function FeaturedWork() {
  const { t } = useI18n();
  const items = t.projects.items.slice(0, 4);
  return (
    <section style={{ background: 'var(--bg-alt)' }}>
      <div className="container">
        <div className="section-head" style={{ borderTop: 'none' }}>
          <div className="eyebrow">{t.home.featuredEyebrow}</div>
          <div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(40px, 6vw, 96px)', maxWidth: '14ch', whiteSpace: 'pre-line', marginBottom: 24 }}>
              {t.home.featuredTitle}
            </h2>
            <p className="body-lg reveal" style={{ maxWidth: '56ch' }}>{t.home.featuredSub}</p>
          </div>
        </div>

        <div className="reveal-stagger" style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 'clamp(16px, 2vw, 32px)',
          paddingBottom: 96,
        }}>
          {items.map((p, i) => {
            const spans = [
              { col: '1 / span 7', aspect: '4/3' },
              { col: '8 / span 5', aspect: '3/4' },
              { col: '1 / span 5', aspect: '3/4' },
              { col: '6 / span 7', aspect: '4/3' },
            ][i];
            return (
              <a key={i} href="projects.html" className="proj-card" style={{ gridColumn: spans.col }}>
                <div className="proj-card-img" style={{ aspectRatio: spans.aspect, position: 'relative' }}>
                  {p.img
                    ? <img src={p.img} alt={p.t} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
                    : <Ph label={`${p.cat} · ${p.year}`} ratio={spans.aspect} tone="navy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}/>
                  }
                </div>
                <div className="proj-card-meta">
                  <span className="eyebrow">{p.loc} · {p.year}</span>
                  <div className="proj-card-title">{p.t}</div>
                </div>
              </a>
            );
          })}
        </div>

        <div style={{ paddingBottom: 96, display: 'flex', justifyContent: 'flex-end' }}>
          <a href="projects.html" className="link-inline">{t.home.featuredAll} →</a>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const { t } = useI18n();
  return (
    <section className="container">
      <div className="section-head">
        <div className="eyebrow">{t.home.processEyebrow}</div>
        <h2 className="display reveal" style={{ fontSize: 'clamp(40px, 6vw, 96px)', whiteSpace: 'pre-line' }}>
          {t.home.processTitle}
        </h2>
      </div>
      <div className="reveal-stagger" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(16px, 2vw, 32px)',
        paddingBottom: 120,
      }}>
        {t.home.processSteps.map((s, i) => (
          <div key={i} style={{
            padding: '32px 28px',
            borderTop: '1px solid var(--line)',
            minHeight: 280,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            background: 'var(--surface)',
            transition: 'transform var(--dur) var(--ease), background var(--dur-fast) var(--ease)',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--kdc-navy-900)'; e.currentTarget.style.color = 'var(--bone-50)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--surface)'; e.currentTarget.style.color = ''; }}
          >
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.2em', opacity: 0.6 }}>{s.n}</div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 28, letterSpacing: '-0.01em', marginBottom: 12 }}>{s.h}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.75 }}>{s.b}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function BigCta() {
  const { t } = useI18n();
  return (
    <section style={{
      background: 'var(--kdc-navy-900)', color: 'var(--bone-50)',
      padding: 'clamp(80px, 12vw, 180px) 0',
    }}>
      <div className="container">
        <div className="reveal">
          <div className="eyebrow" style={{ color: 'rgba(250,248,244,0.6)', marginBottom: 32 }}>— {t.home.ctaEyebrow}</div>
          <h2 className="display" style={{ fontSize: 'clamp(48px, 8vw, 140px)', maxWidth: '16ch', whiteSpace: 'pre-line', marginBottom: 56 }}>
            {t.home.ctaTitle}
          </h2>
          <p style={{ fontSize: 'clamp(16px, 1.3vw, 20px)', maxWidth: '52ch', color: 'rgba(250,248,244,0.8)', marginBottom: 56, lineHeight: 1.5 }}>
            {t.home.ctaSub}
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="quote.html" className="btn" style={{ background: 'var(--bone-50)', color: 'var(--kdc-navy-900)' }}>
              {t.home.ctaBtn} <span className="btn-arrow">→</span>
            </a>
            <a href="tel:+13059882293" style={{ color: 'rgba(250,248,244,0.9)', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: '1px solid rgba(250,248,244,0.4)', paddingBottom: 4 }}>
              {t.home.ctaCall}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home() {
  return (
    <Shell transparentTop>
      <Hero/>
      <MetricsStrip/>
      <Manifesto/>
      <ServicesTeaser/>
      <FeaturedWork/>
      <Process/>
      <BigCta/>
    </Shell>
  );
}

// styling for service rows
const homeStyles = document.createElement('style');
homeStyles.textContent = `
.service-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 40px;
  gap: 32px;
  padding: clamp(20px, 2.4vw, 32px) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.service-row:hover {
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  background: var(--bg-alt);
}
.service-row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.service-row-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.service-row-desc {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
.service-row-arr {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-3);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.service-row:hover .service-row-arr { transform: translateX(6px); color: var(--ink); }

.proj-card { display: block; color: var(--ink); overflow: hidden; }
.proj-card-img {
  overflow: hidden;
  position: relative;
}
.proj-card-img > * {
  transition: transform var(--dur-slow) var(--ease);
}
.proj-card:hover .proj-card-img > * { transform: scale(1.04); }
.proj-card-meta {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 0 0;
}
.proj-card-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.01em;
}

@media (max-width: 880px) {
  .service-row { grid-template-columns: 60px 1fr 20px; }
  .service-row-desc { display: none; }
  .proj-card[style*="grid-column"] { grid-column: 1 / -1 !important; }
}
`;
document.head.appendChild(homeStyles);

ReactDOM.createRoot(document.getElementById('root')).render(<Home/>);