/* global React */
const { useState } = React;
const { ArrowRight, useReveal } = window.Tresor;

// ---- OFFERING PAGE ----
function OfferingPage({ lang }) {
  const t = window.COPY[lang];
  const p = t.pages.offering_hero;
  window.Tresor.useReveal();

  return (
    <main>
      <PageHero eyebrow={p.eyebrow} title_1={p.title_1} title_2={p.title_2} sub={p.sub} />

      {/* Detailed offering sections */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          {t.offering.items.map((item, i) => (
            <div key={i} className="reveal" style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1.4fr',
              gap: 80,
              alignItems: 'start',
              padding: '80px 0',
              borderTop: '1px solid var(--rule)',
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: 11, letterSpacing: '0.22em',
                  color: 'var(--accent)', marginBottom: 20,
                }}>Pillar {item.tag}</div>
                <h2 className="serif" style={{
                  fontSize: 'clamp(36px, 4.2vw, 56px)',
                  lineHeight: 1.05,
                  letterSpacing: '-0.015em',
                }}>{item.title}</h2>
              </div>
              <div>
                <p style={{
                  fontSize: 19, lineHeight: 1.65,
                  color: 'var(--navy)',
                  marginBottom: 32,
                  maxWidth: '52ch',
                }}>{item.body}</p>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(3, 1fr)',
                  gap: 0,
                  borderTop: '1px solid var(--rule)',
                }}>
                  {item.bullets.map((b, j) => (
                    <div key={j} style={{
                      padding: '20px 16px 20px 0',
                      borderRight: j < 2 ? '1px solid var(--rule)' : 'none',
                      paddingLeft: j > 0 ? 16 : 0,
                    }}>
                      <div className="mono" style={{
                        fontSize: 10, letterSpacing: '0.18em',
                        textTransform: 'uppercase',
                        color: 'var(--accent)', marginBottom: 8,
                      }}>0{j+1}</div>
                      <div style={{ fontSize: 15, color: 'var(--navy)', fontWeight: 500 }}>{b}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Values block re-used */}
      <div style={{ background: 'var(--navy)' }}>
        <ValuesBlockInline lang={lang} />
      </div>
    </main>
  );
}

function ValuesBlockInline({ lang }) {
  const t = window.COPY[lang].values;
  return (
    <section className="section-dark" style={{ padding: '120px 0' }}>
      <div className="wrap">
        <div style={{ marginBottom: 80, maxWidth: 720 }} className="reveal">
          <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 24 }}>{t.eyebrow}</div>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5vw, 72px)',
            color: 'var(--ivory)', lineHeight: 1.02,
            letterSpacing: '-0.02em',
          }}>
            {t.title_1} <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{t.title_2}</em> {t.title_3}
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          borderTop: '1px solid rgba(255,255,255,0.12)',
        }}>
          {t.items.map((v, i) => (
            <div key={i} className="reveal" style={{
              padding: '32px 28px 32px',
              borderRight: '1px solid rgba(255,255,255,0.08)',
              borderBottom: '1px solid rgba(255,255,255,0.08)',
              paddingLeft: 28,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 16 }}>{v.n}</div>
              <h4 className="serif" style={{ fontSize: 22, color: 'var(--ivory)', marginBottom: 10 }}>{v.t}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(246,242,234,0.62)' }}>{v.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- ABOUT PAGE ----
function AboutPage({ lang }) {
  const t = window.COPY[lang];
  const p = t.pages.about_hero;
  window.Tresor.useReveal();

  return (
    <main>
      <PageHero eyebrow={p.eyebrow} title_1={p.title_1} title_2={p.title_2} sub={p.sub} />

      {/* Principles side column */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div className="grid-2 reveal" style={{ alignItems: 'start', gap: 100 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 28 }}>
                {lang === 'nl' ? 'Ons verhaal' : 'Our story'}
              </div>
              <h2 className="serif" style={{
                fontSize: 'clamp(36px, 4.2vw, 60px)',
                lineHeight: 1.05,
                marginBottom: 0,
              }}>{t.team.title_1}<br/><em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{t.team.title_2}</em></h2>
            </div>
            <div style={{ paddingTop: 20 }}>
              <p style={{ fontSize: 19, lineHeight: 1.7, color: 'var(--navy)', marginBottom: 28 }}>
                <span className="serif" style={{ fontSize: 68, float: 'left', lineHeight: 0.75, paddingRight: 10, paddingTop: 6, color: 'var(--accent)' }}>
                  {lang === 'nl' ? 'T' : 'T'}
                </span>
                {t.team.lede}
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--navy-soft)' }}>
                {lang === 'nl'
                  ? 'Onze klanten zijn ondernemersfamilies, stichtingen en particulieren voor wie vermogen niet alleen een resultaat is maar ook een verantwoordelijkheid. Wij werken in kleine mandaten, met volledige aandacht, en zonder de ruis die een grotere organisatie onvermijdelijk met zich meebrengt.'
                  : 'Our clients are entrepreneurial families, foundations and private individuals for whom wealth is not merely a result but a responsibility. We work in small mandates, with full attention, and without the noise that a larger organisation inevitably brings.'}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Team grid */}
      <section className="section section-ivory-deep">
        <div className="wrap">
          <div className="reveal" style={{ marginBottom: 64, display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
            <h3 className="serif" style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', maxWidth: '16ch' }}>
              {lang === 'nl' ? 'De partners' : 'The partners'}
            </h3>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
              {lang === 'nl' ? 'Gevestigd te Maastricht' : 'Based in Maastricht'}
            </span>
          </div>
          <div className="grid-4">
            {t.team.members.map((m, i) => (
              <div key={i} className="reveal">
                <div className="placeholder" style={{ aspectRatio: '3 / 4', marginBottom: 20 }}>
                  <span className="placeholder-label">PORTRAIT — {m.name.toUpperCase()}</span>
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8 }}>{m.role}</div>
                <h4 className="serif" style={{ fontSize: 22, marginBottom: 8 }}>{m.name}</h4>
                <p style={{ fontSize: 14, color: 'var(--navy-soft)', lineHeight: 1.5 }}>{m.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section section-dark">
        <div className="wrap">
          <div className="reveal" style={{ marginBottom: 80 }}>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 24 }}>
              {lang === 'nl' ? 'Sinds 2015' : 'Since 2015'}
            </div>
            <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 72px)', color: 'var(--ivory)', lineHeight: 1.02, letterSpacing: '-0.02em', maxWidth: '18ch' }}>
              {lang === 'nl' ? <>Elf jaar <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>gestaag</em> bouwen.</> : <>Eleven years of <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>steady</em> building.</>}
            </h2>
          </div>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)' }}>
            {(lang === 'nl' ? [
              ['2015', 'Oprichting', 'Tresor Capital wordt opgericht in Maastricht met drie partners en een handvol relaties.'],
              ['2017', 'AFM-vergunning', 'Volledige vergunning als onafhankelijk vermogensbeheerder, toezicht door AFM en DNB.'],
              ['2019', 'Familieholdings-mandaat', 'Lancering van ons kerndoekdoek: een geconcentreerde selectie Europese holdings.'],
              ['2022', 'Private Equity-toegang', 'Directe deelnemingen en co-investments in Europese mid-market bedrijven.'],
              ['2026', 'Vandaag', '140+ relaties, 75 jaar gecombineerde ervaring. De koers blijft dezelfde.'],
            ] : [
              ['2015', 'Founded', 'Tresor Capital is founded in Maastricht with three partners and a handful of clients.'],
              ['2017', 'AFM licence', 'Full licence as an independent wealth manager, supervised by AFM and DNB.'],
              ['2019', 'Family-holdings mandate', 'Launch of our signature mandate: a concentrated selection of European holdings.'],
              ['2022', 'Private Equity access', 'Direct deals and co-investments in European mid-market businesses.'],
              ['2026', 'Today', '140+ clients, 75 years of combined experience. Course unchanged.'],
            ]).map((row, i) => (
              <div key={i} className="reveal" style={{
                display: 'grid',
                gridTemplateColumns: '140px 1fr 2fr',
                gap: 40,
                padding: '32px 0',
                borderBottom: '1px solid rgba(255,255,255,0.08)',
                alignItems: 'baseline',
              }}>
                <div className="serif" style={{ fontSize: 32, color: 'var(--accent)' }}>{row[0]}</div>
                <h4 className="serif" style={{ fontSize: 22, color: 'var(--ivory)' }}>{row[1]}</h4>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: 'rgba(246,242,234,0.65)', maxWidth: '60ch' }}>{row[2]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- NEWS PAGE ----
function NewsPage({ lang }) {
  const t = window.COPY[lang];
  const p = t.pages.news_hero;
  window.Tresor.useReveal();
  const [filter, setFilter] = useState('all');

  const categories = ['all', ...Array.from(new Set(t.news.items.map(i => i.cat)))];
  const filtered = filter === 'all' ? t.news.items : t.news.items.filter(i => i.cat === filter);

  return (
    <main>
      <PageHero eyebrow={p.eyebrow} title_1={p.title_1} title_2={p.title_2} sub={p.sub} />

      {/* Newsletter CTA */}
      <section style={{ background: 'var(--navy)', padding: '56px 0', color: 'var(--ivory)' }}>
        <div className="wrap" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 40,
          alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 12 }}>{t.news.eyebrow}</div>
            <p className="serif" style={{ fontSize: 28, color: 'var(--ivory)', letterSpacing: '-0.01em' }}>
              {lang === 'nl' ? 'Wekelijks, elke vrijdagochtend, in uw inbox.' : 'Weekly, every Friday morning, in your inbox.'}
            </p>
          </div>
          <form className="news-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder={t.news.email_ph} />
            <button>{t.news.subscribe} →</button>
          </form>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          {/* Filters */}
          <div className="reveal" style={{
            display: 'flex', gap: 24, flexWrap: 'wrap',
            marginBottom: 48,
            paddingBottom: 20,
            borderBottom: '1px solid var(--rule)',
          }}>
            {categories.map(c => (
              <button key={c} onClick={() => setFilter(c)} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                font: 'inherit', fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: filter === c ? 'var(--accent)' : 'var(--muted)',
                padding: '4px 0',
                borderBottom: filter === c ? '1px solid var(--accent)' : '1px solid transparent',
                transition: 'all 0.2s',
              }}>
                {c === 'all' ? (lang === 'nl' ? 'Alle' : 'All') : c}
              </button>
            ))}
          </div>

          {/* Articles */}
          <div>
            {filtered.map((item, i) => (
              <article key={i} className="reveal" style={{
                display: 'grid',
                gridTemplateColumns: '140px 160px 1fr 80px',
                gap: 32,
                padding: '28px 0',
                borderBottom: '1px solid var(--rule)',
                alignItems: 'baseline',
                cursor: 'pointer',
                transition: 'background 0.2s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.paddingLeft = '16px'}
              onMouseLeave={(e) => e.currentTarget.style.paddingLeft = '0'}
              >
                <span className="mono" style={{ fontSize: 12, letterSpacing: '0.08em', color: 'var(--muted)' }}>{item.date}</span>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: 'var(--accent)',
                }}>{item.cat}</span>
                <h3 className="serif" style={{ fontSize: 24, lineHeight: 1.3, letterSpacing: '-0.01em' }}>{item.title}</h3>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', textAlign: 'right' }}>{item.read}</span>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ---- CONTACT PAGE ----
function ContactPage({ lang }) {
  const t = window.COPY[lang];
  const p = t.pages.contact_hero;
  window.Tresor.useReveal();
  const [sent, setSent] = useState(false);

  return (
    <main>
      <PageHero eyebrow={p.eyebrow} title_1={p.title_1} title_2={p.title_2} sub={p.sub} />

      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap">
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.2fr',
            gap: 80,
            alignItems: 'start',
          }} className="contact-grid">
            {/* Details */}
            <div className="reveal">
              <ContactField label={t.contact.address_label} value={t.contact.address.join('\n')} />
              <ContactField label={t.contact.email_label} value={t.contact.email} link />
              <ContactField label={t.contact.phone_label} value={t.contact.phone} />
              <ContactField label={t.contact.hours_label} value={t.contact.hours} />

              <div className="placeholder" style={{
                aspectRatio: '4 / 3', marginTop: 32,
                position: 'relative',
                background: 'var(--navy)',
                border: 'none',
              }}>
                {/* Mock map */}
                <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <defs>
                    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
                    </pattern>
                  </defs>
                  <rect width="400" height="300" fill="url(#grid)" />
                  <path d="M 0 180 Q 100 160 200 170 T 400 160" stroke="var(--accent)" strokeOpacity="0.5" strokeWidth="1" fill="none" />
                  <path d="M 100 0 L 180 140 L 220 160 L 280 300" stroke="rgba(255,255,255,0.15)" strokeWidth="2" fill="none" />
                  <circle cx="200" cy="150" r="8" fill="var(--accent)" />
                  <circle cx="200" cy="150" r="18" fill="none" stroke="var(--accent)" strokeOpacity="0.4" />
                  <circle cx="200" cy="150" r="32" fill="none" stroke="var(--accent)" strokeOpacity="0.2" />
                  <text x="210" y="178" fill="var(--accent)" fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2">MAASTRICHT</text>
                </svg>
                <span className="placeholder-label" style={{ color: 'var(--ivory)', position: 'relative', zIndex: 1 }}>
                  WIM DUISENBERGPLANTSOEN 31
                </span>
              </div>
            </div>

            {/* Form */}
            <div className="reveal" style={{
              background: 'var(--ivory-warm)',
              padding: '56px 48px',
              borderTop: '2px solid var(--accent)',
            }}>
              <h3 className="serif" style={{ fontSize: 32, marginBottom: 12 }}>
                {lang === 'nl' ? 'Schrijf ons' : 'Write to us'}
              </h3>
              <p style={{ color: 'var(--navy-soft)', marginBottom: 36, fontSize: 15 }}>
                {lang === 'nl' ? 'Wij reageren binnen één werkdag.' : 'We reply within one business day.'}
              </p>
              {sent ? (
                <div style={{
                  padding: '40px 0',
                  textAlign: 'center',
                  borderTop: '1px solid var(--rule)',
                  borderBottom: '1px solid var(--rule)',
                }}>
                  <div className="serif" style={{ fontSize: 48, color: 'var(--accent)', marginBottom: 16 }}>✓</div>
                  <p style={{ fontSize: 17 }}>{t.contact.form.sent}</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <ContactInput label={t.contact.form.name} />
                  <ContactInput label={t.contact.form.email} type="email" />
                  <ContactInput label={t.contact.form.subject} />
                  <ContactInput label={t.contact.form.message} multiline />
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 20 }}>
                    {t.contact.form.send} <ArrowRight />
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
      <style>{`
        @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </main>
  );
}

function ContactField({ label, value, link }) {
  return (
    <div style={{ borderTop: '1px solid var(--rule)', padding: '20px 0' }}>
      <div className="mono" style={{
        fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'var(--accent)', marginBottom: 8,
      }}>{label}</div>
      <div className="serif" style={{ fontSize: 22, whiteSpace: 'pre-line', lineHeight: 1.35 }}>
        {link ? <a href={`mailto:${value}`} style={{ color: 'var(--navy)' }}>{value}</a> : value}
      </div>
    </div>
  );
}

function ContactInput({ label, type = 'text', multiline }) {
  const Tag = multiline ? 'textarea' : 'input';
  return (
    <label style={{ display: 'block', marginBottom: 24 }}>
      <span style={{
        display: 'block',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--muted)', marginBottom: 8,
      }}>{label}</span>
      <Tag
        type={type}
        rows={multiline ? 4 : undefined}
        style={{
          width: '100%', padding: '12px 0',
          border: 'none', borderBottom: '1px solid var(--rule-strong)',
          background: 'transparent', font: 'inherit', fontSize: 16, outline: 'none',
          color: 'var(--navy)', resize: 'vertical',
          fontFamily: multiline ? "'DM Sans', sans-serif" : 'inherit',
        }}
        onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
        onBlur={(e) => e.target.style.borderColor = 'var(--rule-strong)'}
      />
    </label>
  );
}

// Reusable page hero
function PageHero({ eyebrow, title_1, title_2, sub }) {
  return (
    <section style={{
      background: 'var(--navy)',
      color: 'var(--ivory)',
      padding: '160px 0 100px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <img src={window.__resources?.tcIcon || 'site/tc-icon.png'} alt="" style={{
        position: 'absolute',
        right: '-4%', top: '50%', transform: 'translateY(-50%)',
        width: 'min(560px, 48vw)', height: 'auto',
        opacity: 0.07,
        pointerEvents: 'none',
        filter: 'brightness(3) saturate(0)',
        zIndex: 1,
      }} />
      <svg viewBox="0 0 1600 600" preserveAspectRatio="xMaxYMid slice" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity: 0.12, pointerEvents: 'none', zIndex: 1,
      }}>
        {[0,1,2,3,4,5].map(i => (
          <circle key={i} cx="1500" cy="300" r={100 + i * 80}
            fill="none" stroke="var(--accent)" strokeOpacity={0.25 - i*0.02} strokeWidth="1" />
        ))}
      </svg>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="eyebrow reveal" style={{ color: 'var(--accent)', marginBottom: 32 }}>
          <span style={{ background: 'var(--accent)', width: 28, height: 1 }}></span>
          {eyebrow}
        </div>
        <h1 className="serif reveal" style={{
          fontSize: 'clamp(52px, 7vw, 108px)',
          lineHeight: 1.0,
          color: 'var(--ivory)',
          letterSpacing: '-0.025em',
          marginBottom: 40,
          maxWidth: '16ch',
        }}>
          {title_1} <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{title_2}</em>
        </h1>
        <p className="reveal" style={{
          maxWidth: '58ch', fontSize: 18, lineHeight: 1.65,
          color: 'rgba(246,242,234,0.78)',
        }}>{sub}</p>
      </div>
    </section>
  );
}

window.OfferingPage = OfferingPage;
window.AboutPage = AboutPage;
window.NewsPage = NewsPage;
window.ContactPage = ContactPage;