// Landing page — concrete-museum aesthetic. Restraint, hairlines, breath.

function Landing({ go, lang = 'en' }) {
  return (
    <div className="fade-in">
      <Hero go={go} lang={lang} />
      <Manifesto lang={lang} />
      <HowItWorks lang={lang} />
      <SampleShelves go={go} lang={lang} />
      <Numbers lang={lang} />
      <CTA go={go} lang={lang} />
      <Footer lang={lang} />
    </div>
  );
}

// ── Hero — a concrete wall ────────────────────────────────────────────────
function Hero({ go, lang = 'en' }) {
  const tl = window.T[lang].landing;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--rule)', background: 'var(--paper)' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 28%, transparent 72%, rgba(0,0,0,0.04) 100%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'var(--hairline)',
      }} />

      <div className="page" style={{ position: 'relative', padding: '120px 32px 140px' }}>
        {/* Tag row */}
        <div className="flex" style={{ alignItems: 'center', gap: 16, marginBottom: 96 }}>
          <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>№ 001</span>
          <span style={{ height: 1, flex: 1, background: 'var(--rule)', maxWidth: 80 }} />
          <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.32em' }}>{tl.heroTagline}</span>
          <span style={{ height: 1, flex: 1, background: 'var(--rule)' }} />
          <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.32em' }}>Lisbon · MMXXVI</span>
        </div>

        {/* Wordmark + lit outline */}
        <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, lineHeight: 0.88 }}>
          <h1 className="display" style={{ fontSize: 'clamp(96px, 14vw, 220px)', margin: 0, letterSpacing: '-0.045em', color: 'var(--ink)' }}>
            R<span style={{ color: 'var(--ice)' }}>.</span>I<span style={{ color: 'var(--ice)' }}>.</span>P<span style={{ color: 'var(--ice)' }}>.</span>
          </h1>
          <svg width="220" height="220" viewBox="0 0 220 220" style={{ flex: '0 0 auto', alignSelf: 'flex-end', marginBottom: 12 }}>
            <defs>
              <radialGradient id="frostGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#BFECFF" stopOpacity="0.55" />
                <stop offset="60%" stopColor="#BFECFF" stopOpacity="0" />
              </radialGradient>
            </defs>
            <circle cx="110" cy="110" r="100" fill="url(#frostGlow)" />
            <circle cx="110" cy="110" r="108" fill="none" stroke="var(--ice)" strokeWidth="1.2" />
            <circle cx="110" cy="110" r="60" fill="none" stroke="var(--ice)" strokeWidth="0.9" opacity="0.8" />
            <circle cx="110" cy="110" r="6" fill="var(--frost)" />
            <line x1="2" y1="110" x2="218" y2="110" stroke="var(--ice)" strokeWidth="0.5" strokeDasharray="2 4" opacity="0.5" />
            <line x1="110" y1="2" x2="110" y2="218" stroke="var(--ice)" strokeWidth="0.5" strokeDasharray="2 4" opacity="0.5" />
          </svg>
        </div>

        {/* Subtitle row */}
        <div style={{ position: 'relative', marginTop: 64, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96, alignItems: 'flex-start' }}>
          <div>
            <div className="display" style={{ fontSize: 48, marginTop: 4, color: 'var(--ink)' }}>
              Rest In <em className="serif" style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--ice)' }}>Possessions</em>
            </div>
            <p className="serif" style={{ fontSize: 21, lineHeight: 1.6, maxWidth: 560, marginTop: 40, color: 'var(--ink-2)', fontWeight: 300 }}>
              {tl.heroDesc}
            </p>
            <div className="flex gap-3" style={{ marginTop: 56 }}>
              <button className="btn" onClick={() => go('archive')}>{tl.heroCta}</button>
              <button className="btn ghost" onClick={() => go('archive')}>{tl.heroSecondary}</button>
            </div>
          </div>

          {/* Side spec — hairline only */}
          <aside style={{
            position: 'relative', alignSelf: 'flex-end',
            borderTop: '1px solid var(--ice)',
            padding: '24px 0 0',
            maxWidth: 380, marginLeft: 'auto',
          }}>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', marginBottom: 20, letterSpacing: '0.28em' }}>
              Specimen · H.M. · 04211
            </div>
            <div className="serif" style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', fontWeight: 300 }}>
              <span style={{ display: 'block', marginBottom: 12 }}>
                <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', marginRight: 12 }}>Item 14 / 47</span>
                Underwood No. 5, 1936.
              </span>
              <em>"To Mateo, who has been 'almost finished with the first draft' for nine years. The machine is louder than your laptop. Use it."</em>
            </div>
            <div className="flex" style={{ marginTop: 28, justifyContent: 'space-between', alignItems: 'center', paddingTop: 16, borderTop: '1px dotted var(--hairline)' }}>
              <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.22em' }}><span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--frost)', marginRight: 8, transform: 'translateY(-1px)' }}></span>Sealed</span>
              <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>Delivered on reading</span>
            </div>
          </aside>
        </div>

        <div className="flex" style={{ marginTop: 120, alignItems: 'center', gap: 64, paddingTop: 28, borderTop: '1px solid var(--rule)', flexWrap: 'wrap' }}>
          {tl.heroSteps.map(([n, l]) => (
            <div key={n} className="flex gap-2" style={{ alignItems: 'baseline' }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--ice)', letterSpacing: '0.18em' }}>{n}</span>
              <span className="mono tiny upper" style={{ color: 'var(--ink-2)', letterSpacing: '0.24em' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Manifesto ─────────────────────────────────────────────────────────────
function Manifesto({ lang = 'en' }) {
  const tl = window.T[lang].landing;
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '140px 0' }}>
      <div className="page">
        <div className="grid" style={{ gridTemplateColumns: '1fr 2.2fr', gap: 96, alignItems: 'flex-start' }}>
          <div>
            <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>{tl.manifestoTag}</span>
            <div className="display" style={{ fontSize: 44, marginTop: 32, lineHeight: 1.05, color: 'var(--paper)' }}>
              {tl.manifestoTitle.split('\n').map((line, i) => <span key={i}>{line}{i < 2 && <br />}</span>)}
            </div>
          </div>
          <div className="serif" style={{ fontSize: 24, lineHeight: 1.55, color: 'rgba(239,239,237,0.82)', maxWidth: 760, fontWeight: 300 }}>
            {tl.manifestoBody}
            <br/><br/>
            <span style={{ color: 'var(--ice)' }}>{tl.manifestoEm}</span> {tl.manifestoBody2}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── How it works ─────────────────────────────────────────────────────────
function HowItWorks({ lang = 'en' }) {
  const tl = window.T[lang].landing;
  const steps = lang === 'zh' ? [
    { n: '01', title: '登錄', body: '為物品拍照。加入來源、家中位置、狀態。按自己的節奏建立典藏庫——一把椅子，或四十七件物品。' },
    { n: '02', title: '遺贈', body: '指定一個人、一個地方、一個機構，或一組條件（「每逢週日下廚的人」）。遺贈可以具體、附帶條件，或是開放性的。' },
    { n: '03', title: '題記', body: '寫下你希望在物品易手時所說的話。一句話就足夠了。大多數人會寫三句。' },
    { n: '04', title: '封印', body: '你所在地區的公證人聯署典藏庫。我們保管封印。在約定的日子，包裹將被送往各處。' },
  ] : [
    { n: '01', title: 'Catalogue', body: 'Photograph an object. Add provenance, location in your home, condition. Build the archive at your own pace — a single chair, or forty-seven things.' },
    { n: '02', title: 'Bequeath',  body: 'Name a person, a place, an institution, or a set of conditions ("whoever cooks on Sundays"). Bequests may be specific, contingent, or open.' },
    { n: '03', title: 'Inscribe',  body: 'Write what you would like said when the thing changes hands. One sentence is enough. Most people write three.' },
    { n: '04', title: 'Seal',      body: 'A notary in your jurisdiction co-signs the archive. We hold the seal. On the appointed day, the parcels are routed.' },
  ];
  return (
    <section id="how-it-works" style={{ padding: '160px 0 120px' }}>
      <div className="page">
        <div className="flex" style={{ alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 96 }}>
          <div>
            <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>§ 02 — Method</span>
            <h2 className="display" style={{ fontSize: 64, margin: '24px 0 0', lineHeight: 1 }}>{tl.howItWorksTitle}</h2>
          </div>
          <p className="serif" style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 360, color: 'var(--ink-2)', fontWeight: 300 }}>
            {tl.howItWorksSub}
          </p>
        </div>

        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '40px 28px 56px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)',
            }}>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', marginBottom: 80, letterSpacing: '0.28em' }}>Step {s.n}</div>
              <div className="display" style={{ fontSize: 32, marginBottom: 24, color: 'var(--ink)' }}>{s.title}.</div>
              <p className="serif" style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-2)', margin: 0, fontWeight: 300 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Sample shelves — other people's collections ──────────────────────────
function SampleShelves({ go, lang = 'en' }) {
  const tl = window.T[lang].landing;
  const archives = [
    { name: 'Helena M.',          city: 'Lisbon',    age: 68, items: 47,  sealed: true,  motif: 'circle',   tone: '#3A3A3A' },
    { name: 'Yusuf K.',           city: 'Istanbul',  age: 54, items: 19,  sealed: false, motif: 'square',   tone: '#9AA0A6' },
    { name: 'Estate of Joana V.', city: 'Salvador',  age: 81, items: 112, sealed: true,  motif: 'triangle', tone: '#C8C8C5', posthumous: true },
  ];
  return (
    <section style={{ padding: '120px 0 140px', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="page">
        <div className="flex" style={{ alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 64 }}>
          <div>
            <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>{tl.shelvesTag}</span>
            <h2 className="display" style={{ fontSize: 56, margin: '24px 0 0', lineHeight: 1 }}>
              {tl.shelvesTitle.split('\n').map((line, i) => <span key={i}>{line}{i === 0 && <br />}</span>)}
            </h2>
          </div>
          <button className="btn ghost" onClick={() => go('archive')}>{tl.tourBtn}</button>
        </div>

        <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink)' }}>
          {archives.map((a, i) => (
            <article key={a.name} style={{
              padding: '32px 28px 36px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)',
              borderBottom: '1px solid var(--ink)',
              background: 'var(--paper)',
              cursor: 'pointer',
            }} onClick={() => i === 0 && go('archive')}>
              <div className="flex" style={{ justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.28em' }}>Archive 04{20+i}1</span>
                <span className="mono tiny upper" style={{ color: a.sealed ? 'var(--ice)' : 'var(--muted)', letterSpacing: '0.22em' }}>
                  {a.sealed ? (<><span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--frost)', marginRight: 8, transform: 'translateY(-1px)' }}></span>{tl.sealedLabel}</>) : `▫ ${tl.draftingLabel}`}
                </span>
              </div>
              {/* Wireframe composition, single tone */}
              <div style={{
                position: 'relative', height: 220, marginBottom: 32,
                background: a.tone,
                overflow: 'hidden',
                boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.10)',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: 'linear-gradient(135deg, rgba(255,255,255,0.10), transparent 50%, rgba(0,0,0,0.10))',
                }} />
                {a.motif === 'circle' && (
                  <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                    <circle cx="100" cy="100" r="58" fill="none" stroke="rgba(255,255,255,0.85)" strokeWidth="0.8" />
                  </svg>
                )}
                {a.motif === 'square' && (
                  <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                    <rect x="50" y="50" width="100" height="100" fill="none" stroke="rgba(17,17,17,0.85)" strokeWidth="0.8" />
                  </svg>
                )}
                {a.motif === 'triangle' && (
                  <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                    <polygon points="100,42 160,154 40,154" fill="none" stroke="rgba(17,17,17,0.85)" strokeWidth="0.8" />
                  </svg>
                )}
              </div>
              <div className="display" style={{ fontSize: 26, lineHeight: 1.1, marginBottom: 14 }}>{a.name}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>
                {a.city} · b. {2026 - a.age} · {a.items} items {a.posthumous && '· delivered'}
              </div>
            </article>
          ))}
        </div>

        <p className="serif" style={{ marginTop: 36, fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 720, fontWeight: 300 }}>
          {tl.shelvesNote}
        </p>
      </div>
    </section>
  );
}

// ── Numbers ───────────────────────────────────────────────────────────────
function Numbers({ lang = 'en' }) {
  const stats = window.T[lang].landing.numbersStats;
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="page">
        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
          {stats.map(([n, l], i) => (
            <div key={l} style={{ padding: '40px 28px', borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)' }}>
              <div className="display" style={{ fontSize: 52, color: 'var(--ink)', lineHeight: 1 }}>{n}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', marginTop: 24, letterSpacing: '0.28em' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Closing CTA ───────────────────────────────────────────────────────────
function CTA({ go, lang = 'en' }) {
  const tl = window.T[lang].landing;
  return (
    <section style={{ padding: '120px 0 80px' }}>
      <div className="page">
        <div style={{
          position: 'relative',
          background: 'var(--ink)', color: 'var(--paper)',
          padding: '120px 64px',
          overflow: 'hidden',
        }}>
          {/* Thin outline circle — single light source */}
          <svg width="320" height="320" viewBox="0 0 320 320" style={{ position: 'absolute', right: 48, top: 60 }}>
            <defs>
              <radialGradient id="ctaGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#BFECFF" stopOpacity="0.32" />
                <stop offset="65%" stopColor="#BFECFF" stopOpacity="0" />
              </radialGradient>
            </defs>
            <circle cx="160" cy="160" r="150" fill="url(#ctaGlow)" />
            <circle cx="160" cy="160" r="158" fill="none" stroke="var(--frost)" strokeWidth="1.2" opacity="0.7" />
            <circle cx="160" cy="160" r="100" fill="none" stroke="var(--ice)" strokeWidth="0.8" opacity="0.55" />
            <circle cx="160" cy="160" r="6" fill="var(--frost)" />
          </svg>
          {/* Faint cast-shadow gradient */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(135deg, rgba(255,255,255,0.04), transparent 50%)',
          }} />
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <span className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.32em' }}>§ 04 — Begin</span>
            <h2 className="display" style={{ fontSize: 76, margin: '32px 0 32px', lineHeight: 0.95 }}>
              {lang === 'zh' ? '從一件物品\n開始。' : 'Start with\none thing.'}
            </h2>
            <p className="serif" style={{ fontSize: 22, lineHeight: 1.6, color: 'rgba(239,239,237,0.78)', maxWidth: 540, fontWeight: 300 }}>
              {lang === 'zh' ? '就是你桌上現在那件物品。你的手常常摸向它的那一件。告訴我們誰應該擁有它，以及為什麼。只需四分鐘。' : 'Pick the object on your desk right now. The one your hand goes to. Tell us who should have it, and why. It takes four minutes.'}
            </p>
            <div className="flex gap-3" style={{ marginTop: 56 }}>
              <button className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)', borderColor: 'var(--paper)' }} onClick={() => go('archive')}>{tl.heroCta}</button>
              <button className="btn ghost" style={{ color: 'var(--paper)', borderColor: 'rgba(239,239,237,0.6)' }}>
                {tl.heroSecondary}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Landing });
