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

// ---- HOME ----
function HomePage({ lang, setRoute }) {
  const t = window.COPY[lang];
  window.Tresor.useReveal();

  return (
    <main>
      {/* HERO */}
      <section className="hero-section" style={{
        background: 'var(--navy)',
        color: 'var(--ivory)',
        padding: '180px 0 140px',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <HeroDecor />
        <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
          <div className="eyebrow reveal" style={{ color: 'var(--accent)', marginBottom: 40 }}>
            <span style={{ background: 'var(--accent)', width: 28, height: 1 }}></span>
            {t.hero.eyebrow}
          </div>
          <h1 className="serif reveal" style={{
            fontSize: 'clamp(56px, 8.5vw, 128px)',
            lineHeight: 0.98,
            color: 'var(--ivory)',
            maxWidth: '14ch',
            letterSpacing: '-0.025em',
            marginBottom: 48,
          }}>
            {t.hero.title_1} <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{t.hero.title_2}</em><br/>
            {t.hero.title_3}
          </h1>
          <p className="reveal" style={{
            maxWidth: '62ch',
            fontSize: 19,
            lineHeight: 1.6,
            color: 'rgba(246,242,234,0.78)',
            marginBottom: 56,
          }}>{t.hero.sub}</p>
          <div className="reveal" style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <button className="btn btn-gold" onClick={() => setRoute('offering')}>
              {t.hero.cta_primary} <ArrowRight />
            </button>
            <button className="btn" style={{
              color: 'var(--ivory)', borderColor: 'rgba(255,255,255,0.4)',
            }} onClick={() => setRoute('about')}>
              {t.hero.cta_secondary}
            </button>
          </div>
        </div>
        <div style={{
          position: 'absolute',
          left: 40, bottom: 32,
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: '0.2em',
          textTransform: 'uppercase',
          color: 'rgba(246,242,234,0.5)',
          zIndex: 2,
        }}>
          <span>{t.hero.scroll}</span>
          <span style={{
            width: 1, height: 40, background: 'var(--accent)',
            animation: 'scrollPulse 2s ease-in-out infinite',
          }}></span>
        </div>
      </section>

      {/* STATS */}
      <StatsBand lang={lang} />

      {/* PHILOSOPHY QUOTE */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="wrap-tight">
          <div className="reveal" style={{ textAlign: 'center' }}>
            <div className="rule-gold" style={{ margin: '0 auto 40px' }}></div>
            <p className="serif" style={{
              fontSize: 'clamp(32px, 4vw, 52px)',
              lineHeight: 1.25,
              fontStyle: 'italic',
              color: 'var(--navy)',
              marginBottom: 32,
              textWrap: 'balance',
            }}>{t.philosophy.quote}</p>
            <p className="mono" style={{
              fontSize: 12, letterSpacing: '0.15em',
              textTransform: 'uppercase', color: 'var(--muted)',
            }}>{t.philosophy.attribution}</p>
          </div>
        </div>
      </section>

      {/* OFFERING GRID */}
      <OfferingBlock lang={lang} setRoute={setRoute} />

      {/* VALUES */}
      <ValuesBlock lang={lang} />

      {/* NEWSLETTER + NEWS */}
      <NewsletterBlock lang={lang} setRoute={setRoute} />

      {/* CONTACT CTA */}
      <ContactCTA lang={lang} setRoute={setRoute} />
    </main>
  );
}

function HeroDecor() {
  return (
    <>
      <img src={window.__resources?.tcIcon || 'site/tc-icon.png'} alt="" style={{
        position: 'absolute',
        right: '-6%', top: '50%', transform: 'translateY(-50%)',
        width: 'min(720px, 55vw)', height: 'auto',
        opacity: 0.07,
        pointerEvents: 'none',
        filter: 'brightness(3) saturate(0)',
      }} />
      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMaxYMid slice" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity: 0.18, pointerEvents: 'none',
      }}>
        <defs>
          <linearGradient id="ghold" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity="0.5" />
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* Concentric arcs */}
        {[0,1,2,3,4,5,6,7].map(i => (
          <circle key={i} cx="1500" cy="450" r={120 + i * 90}
            fill="none" stroke="var(--accent)" strokeOpacity={0.18 - i*0.015} strokeWidth="1" />
        ))}
        {/* Thin grid */}
        {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
          <line key={'v'+i} x1={i*140} y1="0" x2={i*140} y2="900" stroke="var(--accent)" strokeOpacity="0.06" />
        ))}
      </svg>
      <style>{`
        @keyframes scrollPulse {
          0%, 100% { opacity: 0.3; transform: scaleY(0.4); transform-origin: top; }
          50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
        }
      `}</style>
    </>
  );
}

function StatsBand({ lang }) {
  const t = window.COPY[lang];
  const stats = [
    { v: 140, suf: '+', label: t.stats.clients },
    { v: 75, suf: '+', label: t.stats.experience },
    { v: 850, pre: '€', suf: 'M', label: t.stats.aum },
    { v: 6, suf: 'M €', label: t.stats.mandate },
  ];
  return (
    <section style={{
      background: 'var(--ivory)',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
    }}>
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 0,
      }}>
        {stats.map((s, i) => (
          <div key={i} className="reveal" style={{
            padding: '56px 32px',
            borderRight: i < stats.length - 1 ? '1px solid var(--rule)' : 'none',
          }}>
            <div className="serif" style={{
              fontSize: 'clamp(44px, 5vw, 72px)',
              lineHeight: 1,
              color: 'var(--navy)',
              marginBottom: 18,
              letterSpacing: '-0.02em',
            }}>
              <Counter to={s.v} prefix={s.pre || ''} suffix={s.suf || ''} />
            </div>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '0.15em',
              textTransform: 'uppercase', color: 'var(--muted)',
              lineHeight: 1.5,
            }}>{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function OfferingBlock({ lang, setRoute }) {
  const t = window.COPY[lang].offering;
  return (
    <section className="section section-ivory-deep">
      <div className="wrap">
        <div className="grid-2" style={{ alignItems: 'end', marginBottom: 80, gap: 80 }}>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 28 }}>{t.eyebrow}</div>
            <h2 className="serif" style={{
              fontSize: 'clamp(40px, 5.5vw, 84px)',
              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 className="reveal">
            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--navy-soft)', maxWidth: '44ch' }}>{t.lede}</p>
            <button className="btn-link" style={{ marginTop: 28 }} onClick={() => setRoute('offering')}>
              {lang === 'nl' ? 'Volledig aanbod' : 'Full offering'} <span className="arrow"><ArrowRight /></span>
            </button>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          borderTop: '1px solid var(--rule-strong)',
          borderLeft: '1px solid var(--rule-strong)',
        }}>
          {t.items.map((item, i) => (
            <OfferingCard key={i} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
}

function OfferingCard({ tag, title, body, bullets }) {
  const [hov, setHov] = useState(false);
  return (
    <div
      className="reveal"
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        padding: '40px 32px 48px',
        borderRight: '1px solid var(--rule-strong)',
        borderBottom: '1px solid var(--rule-strong)',
        minHeight: 360,
        background: hov ? 'var(--navy)' : 'transparent',
        color: hov ? 'var(--ivory)' : 'var(--navy)',
        transition: 'all 0.35s cubic-bezier(0.2, 0.6, 0.2, 1)',
        display: 'flex',
        flexDirection: 'column',
        cursor: 'pointer',
      }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.2em',
        color: 'var(--accent)',
        marginBottom: 28,
      }}>{tag}</div>
      <h3 className="serif" style={{
        fontSize: 28,
        color: 'inherit',
        marginBottom: 16,
        letterSpacing: '-0.01em',
      }}>{title}</h3>
      <p style={{
        fontSize: 14.5,
        lineHeight: 1.6,
        color: hov ? 'rgba(246,242,234,0.78)' : 'var(--navy-soft)',
        marginBottom: 28,
        flex: 1,
      }}>{body}</p>
      <ul style={{
        listStyle: 'none',
        borderTop: '1px solid ' + (hov ? 'rgba(255,255,255,0.15)' : 'var(--rule)'),
        paddingTop: 16,
      }}>
        {bullets.map((b, i) => (
          <li key={i} style={{
            fontSize: 12,
            fontFamily: 'JetBrains Mono, monospace',
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            padding: '6px 0',
            color: hov ? 'rgba(246,242,234,0.65)' : 'var(--muted)',
          }}>— {b}</li>
        ))}
      </ul>
    </div>
  );
}

function ValuesBlock({ lang }) {
  const t = window.COPY[lang].values;
  return (
    <section className="section section-dark">
      <div className="wrap">
        <div className="grid-2" style={{ alignItems: 'end', marginBottom: 80, gap: 80 }}>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 28, color: 'var(--accent)' }}>{t.eyebrow}</div>
            <h2 className="serif" style={{
              fontSize: 'clamp(44px, 6vw, 96px)',
              lineHeight: 1.0,
              color: 'var(--ivory)',
              letterSpacing: '-0.02em',
            }}>
              {t.title_1} <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{t.title_2}</em> {t.title_3}
            </h2>
          </div>
          <div className="reveal">
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(246,242,234,0.72)', maxWidth: '42ch' }}>{t.lede}</p>
          </div>
        </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: '36px 28px 36px 0',
              borderRight: (i + 1) % 4 === 0 ? 'none' : '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: 20,
              }}>{v.n}</div>
              <h4 className="serif" style={{
                fontSize: 24, color: 'var(--ivory)', marginBottom: 12,
              }}>{v.t}</h4>
              <p style={{
                fontSize: 14, lineHeight: 1.65,
                color: 'rgba(246,242,234,0.62)',
              }}>{v.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NewsletterBlock({ lang, setRoute }) {
  const t = window.COPY[lang].news;
  const [submitted, setSubmitted] = useState(false);
  return (
    <section className="section" style={{ background: 'var(--paper)' }}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 1fr',
          gap: 100,
          alignItems: 'start',
        }} className="news-grid">
          {/* Left: newsletter signup */}
          <div className="reveal" style={{
            background: 'var(--navy)',
            color: 'var(--ivory)',
            padding: '64px 52px',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute',
              top: -40, right: -40,
              width: 200, height: 200,
              border: '1px solid var(--accent)',
              borderRadius: '50%',
              opacity: 0.2,
            }}></div>
            <div style={{
              position: 'absolute',
              top: 20, right: 20,
              width: 120, height: 120,
              border: '1px solid var(--accent)',
              borderRadius: '50%',
              opacity: 0.4,
            }}></div>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 28 }}>
              {t.eyebrow}
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(44px, 5vw, 72px)',
              color: 'var(--ivory)',
              lineHeight: 1,
              marginBottom: 24,
            }}>
              {t.title_1}<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>{t.title_2}</em>
            </h2>
            <p style={{
              fontSize: 16, lineHeight: 1.6,
              color: 'rgba(246,242,234,0.72)',
              marginBottom: 40,
              maxWidth: '38ch',
            }}>{t.lede}</p>
            <form className="news-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
              <input type="email" placeholder={t.email_ph} required />
              <button type="submit">{submitted ? '✓' : t.subscribe + ' →'}</button>
            </form>
            {submitted && (
              <div className="mono" style={{
                marginTop: 20, fontSize: 11, letterSpacing: '0.15em',
                textTransform: 'uppercase', color: 'var(--accent)',
              }}>
                {lang === 'nl' ? '→ Controleer uw inbox' : '→ Check your inbox'}
              </div>
            )}
          </div>

          {/* Right: latest articles */}
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 32 }}>{t.latest}</div>
            <ul style={{ listStyle: 'none' }}>
              {t.items.slice(0, 4).map((item, i) => (
                <li key={i} className="reveal" style={{
                  borderTop: '1px solid var(--rule)',
                  padding: '22px 0',
                  display: 'flex',
                  gap: 20,
                  alignItems: 'baseline',
                  cursor: 'pointer',
                  transition: 'transform 0.2s',
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateX(6px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}
                >
                  <span className="mono" style={{
                    fontSize: 11, letterSpacing: '0.1em',
                    color: 'var(--muted)', minWidth: 100,
                  }}>{item.date}</span>
                  <span style={{ flex: 1 }}>
                    <div className="mono" style={{
                      fontSize: 10, letterSpacing: '0.18em',
                      textTransform: 'uppercase', color: 'var(--accent)',
                      marginBottom: 6,
                    }}>{item.cat}</div>
                    <div className="serif" style={{ fontSize: 20, lineHeight: 1.3 }}>{item.title}</div>
                  </span>
                  <span className="mono" style={{
                    fontSize: 11, color: 'var(--muted)',
                  }}>{item.read}</span>
                </li>
              ))}
              <li style={{ borderTop: '1px solid var(--rule)', paddingTop: 28 }}>
                <button className="btn-link" onClick={() => setRoute('news')}>
                  {lang === 'nl' ? 'Alle analyses' : 'All analyses'} <span className="arrow"><ArrowRight /></span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr !important; gap: 60px !important; } }
      `}</style>
    </section>
  );
}

function ContactCTA({ lang, setRoute }) {
  const t = window.COPY[lang];
  return (
    <section style={{
      background: 'var(--ivory-warm)',
      padding: '120px 0',
      borderTop: '1px solid var(--rule)',
    }}>
      <div className="wrap-tight" style={{ textAlign: 'center' }}>
        <div className="reveal">
          <div className="eyebrow" style={{ marginBottom: 32, justifyContent: 'center' }}>
            <span style={{ background: 'var(--accent)', width: 28, height: 1 }}></span>
            {lang === 'nl' ? 'Kom in gesprek' : 'Start a conversation'}
          </div>
          <h2 className="serif" style={{
            fontSize: 'clamp(40px, 5.5vw, 80px)',
            lineHeight: 1.05,
            marginBottom: 32,
            letterSpacing: '-0.02em',
          }}>
            {lang === 'nl' ? (
              <>Een gesprek zonder <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>agenda</em>.</>
            ) : (
              <>A conversation without <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>agenda</em>.</>
            )}
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.65,
            color: 'var(--navy-soft)',
            maxWidth: '52ch', margin: '0 auto 48px',
          }}>{t.contact.lede}</p>
          <button className="btn btn-primary" onClick={() => setRoute('contact')}>
            {lang === 'nl' ? 'Plan een kennismaking' : 'Arrange a meeting'} <ArrowRight />
          </button>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;