// Justina Lydia · Coherence Coaching site
// Editorial off-white, warm ink, copper accent. EB Garamond + Work Sans + JetBrains Mono.

const T = {
  page: 'oklch(97% 0.008 75)',
  paper: 'oklch(98.5% 0.005 80)',
  ink: 'oklch(22% 0.012 55)',
  inkSoft: 'oklch(42% 0.012 55)',
  inkFaint: 'oklch(62% 0.015 60)',
  line: 'oklch(88% 0.012 70)',
  accent: 'oklch(62% 0.13 50)',     // electric copper
  accentInk: 'oklch(38% 0.09 45)',  // deeper copper
  glow: 'oklch(78% 0.18 75)',       // warm amber for the lit-up state
  serif: "'EB Garamond', 'Iowan Old Style', Georgia, serif",
  sans: "'Work Sans', system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace",
};

function Site() {
  const openBooking = () => window.open(CONTENT.bookingUrl, '_blank', 'noopener,noreferrer');
  return (
    <div style={{
      background: T.page, color: T.ink,
      fontFamily: T.sans, fontWeight: 400, fontSize: 16, lineHeight: 1.55,
      minHeight: '100vh', overflowX: 'hidden',
    }}>
      <style>{`
        .eyebrow { font-family: ${T.mono}; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: ${T.inkFaint}; }
        .btn {
          display: inline-flex; align-items: center; gap: 10px;
          background: ${T.ink}; color: ${T.page};
          padding: 14px 22px; border-radius: 0; border: 0;
          font: 500 13px/1 ${T.sans}; letter-spacing: 0.06em; text-transform: uppercase;
          cursor: pointer; transition: background .2s;
        }
        .btn:hover { background: ${T.accentInk}; }
        .btn.ghost { background: transparent; color: ${T.ink}; border: 1px solid ${T.ink}; }
        .btn.ghost:hover { background: ${T.ink}; color: ${T.page}; }
        .btn.copper { background: ${T.accent}; }
        .btn.copper:hover { background: ${T.accentInk}; }

        .nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 100;
          background: oklch(97% 0.008 75 / 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          border-bottom: 1px solid ${T.line};
          transition: background .25s ease, border-color .25s ease, color .25s ease;
        }
        .nav.on-dark {
          background: oklch(20% 0.012 55 / 0.9);
          border-bottom-color: oklch(32% 0.02 55);
        }
        .nav.on-dark .brand { color: oklch(92% 0.012 70); }
        .nav.on-dark .navlinks { color: oklch(82% 0.012 70); }
        .nav.on-dark .navlinks a:hover { color: ${T.page}; }
        .nav.on-dark .btn.ghost { border-color: oklch(82% 0.012 70); color: oklch(92% 0.012 70); }
        .nav.on-dark .btn.ghost:hover { background: ${T.page}; color: ${T.ink}; }
        .nav-spacer { height: 62px; }
        @media (max-width: 820px) { .nav-spacer { height: 54px; } }
        .nav-inner {
          max-width: 1280px; margin: 0 auto;
          display: flex; align-items: center; justify-content: space-between;
          padding: 18px 48px;
        }
        .brand { font-family: ${T.serif}; font-size: 22px; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
        .navlinks { display: flex; gap: 36px; font-size: 13.5px; color: ${T.inkSoft}; }
        .navlinks a { color: inherit; text-decoration: none; transition: color .2s; cursor: pointer; }
        .navlinks a:hover { color: ${T.ink}; }

        .pad { padding: 120px 48px; }
        .pad-sm { padding: 84px 48px; }
        .pad-hero { padding: 96px 48px 120px; }
        .pad-foot { padding: 96px 48px 48px; }

        .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: end; }
        .hero-h1 { font-size: clamp(44px, 6.2vw, 88px); }

        .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
        .about-sticky { position: sticky; top: 100px; }
        .about-h2 { font-size: 52px; }
        .about-cred { display: flex; gap: 48px; }

        .method-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: end; margin-bottom: 72px; }
        .method-h2 { font-size: 52px; }

        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
        .step { padding: 32px 24px 32px; position: relative; }
        .step + .step { border-left: 1px solid oklch(32% 0.015 55); }
        .step-num { font-family: ${T.mono}; font-size: 11px; letter-spacing: 0.14em; color: oklch(72% 0.07 50); margin-bottom: 22px; }
        .step-icon { font-size: 22px; line-height: 1; margin-bottom: 22px; display: inline-block; }
        .step-name { font-family: ${T.serif}; font-size: 32px; font-style: italic; letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 10px; }
        .step-sub { font-family: ${T.serif}; font-size: 17px; color: oklch(82% 0.04 50); margin-bottom: 16px; }
        .step-d { font-size: 14.5px; line-height: 1.65; color: oklch(80% 0.012 70); font-weight: 300; }
        .step.lit .step-name { color: ${T.glow}; }
        .step.lit .step-icon { filter: drop-shadow(0 0 14px ${T.glow}); }

        .trace { position: absolute; left: 0; right: 0; top: 24px; height: 24px; pointer-events: none; }

        .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid ${T.line}; }
        .offer { padding: 36px 32px 36px 0; border-bottom: 1px solid ${T.line}; display: flex; flex-direction: column; gap: 16px; min-height: 360px; }
        .offer + .offer:nth-child(even) { padding-left: 32px; border-left: 1px solid ${T.line}; }
        .offer.featured { background: ${T.paper}; padding-left: 32px; padding-right: 32px; }
        .offer.featured .offer-tag { color: ${T.accentInk}; }

        .couples { background: ${T.ink}; color: ${T.page}; }
        .couples-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }

        .testimonial-q { font-size: clamp(26px, 3.2vw, 38px); }

        .footer-cta { font-size: 52px; }

        @media (max-width: 820px) {
          .nav-inner { padding: 14px 20px; }
          .navlinks { display: none; }
          .pad { padding: 72px 22px; }
          .pad-sm { padding: 60px 22px; }
          .pad-hero { padding: 56px 22px 72px; }
          .pad-foot { padding: 64px 22px 36px; }

          .hero-grid { grid-template-columns: 1fr; gap: 36px; }
          .hero-grid > div:first-child { order: 2; }
          .hero-grid > div:last-child { order: 1; max-width: 320px; }

          .about-grid { grid-template-columns: 1fr; gap: 48px; }
          .about-sticky { position: static; }
          .about-h2 { font-size: 38px; }
          .about-cred { gap: 24px; flex-wrap: wrap; }

          .method-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 40px; }
          .method-h2 { font-size: 36px; }
          .steps { grid-template-columns: 1fr; }
          .step { padding: 28px 0; border-top: 1px solid oklch(32% 0.015 55); }
          .step + .step { border-left: 0; }
          .step:first-child { border-top: 0; }
          .trace { display: none; }

          .offer-grid { grid-template-columns: 1fr; }
          .offer { padding: 28px 0; min-height: 0; }
          .offer + .offer:nth-child(even) { padding-left: 0; border-left: 0; }
          .offer.featured { padding: 28px 18px; }

          .couples-grid { grid-template-columns: 1fr; gap: 32px; }

          .footer-cta { font-size: 36px; }
        }
      `}</style>

      <Nav onBook={openBooking} />
      <div className="nav-spacer" />
      <Hero onBook={openBooking} />
      <About />
      <Method />
      <Offerings onBook={openBooking} />
      <Couples onBook={openBooking} />
      <Testimonials />
      <Footer onBook={openBooking} />
    </div>
  );
}

function Nav({ onBook }) {
  const [onDark, setOnDark] = React.useState(false);
  React.useEffect(() => {
    const check = () => {
      const sections = document.querySelectorAll('[data-nav-theme="dark"]');
      const probeY = 30;
      let hit = false;
      sections.forEach((s) => {
        const r = s.getBoundingClientRect();
        if (r.top <= probeY && r.bottom >= probeY) hit = true;
      });
      setOnDark(hit);
    };
    check();
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    return () => {
      window.removeEventListener('scroll', check);
      window.removeEventListener('resize', check);
    };
  }, []);
  const smoothScroll = (id) => (e) => {
    const el = document.getElementById(id);
    if (!el) return;
    e.preventDefault();
    const top = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top, behavior: 'smooth' });
    history.replaceState(null, '', '#' + id);
  };
  return (
    <div className={`nav${onDark ? ' on-dark' : ''}`}>
      <div className="nav-inner">
        <div className="brand">Justina Lydia</div>
        <div className="navlinks">
          <a href="#about" onClick={smoothScroll('about')}>About</a>
          <a href="#method" onClick={smoothScroll('method')}>The method</a>
          <a href="#offerings" onClick={smoothScroll('offerings')}>Offerings</a>
          <a href="#couples" onClick={smoothScroll('couples')}>Couples</a>
        </div>
        <button className="btn ghost" onClick={onBook} style={{ padding: '10px 16px', fontSize: 11.5 }}>
          Discovery call
        </button>
      </div>
    </div>
  );
}

function Hero({ onBook }) {
  return (
    <section className="pad-hero" style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
      <div className="hero-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 40 }}>{CONTENT.hero.eyebrow}</div>
          <h1 className="hero-h1" style={{
            fontFamily: T.serif, fontWeight: 400,
            lineHeight: 1.02, letterSpacing: '-0.02em', margin: 0, color: T.ink,
          }}>
            {CONTENT.hero.h1Lead}<br/>
            <span style={{ fontStyle: 'italic', color: T.accentInk }}>{CONTENT.hero.h1Accent}</span>.
          </h1>
          <p style={{
            marginTop: 40, maxWidth: 480, fontSize: 17.5, lineHeight: 1.6,
            color: T.inkSoft, fontWeight: 300,
          }}>
            {CONTENT.hero.sub}
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 44, alignItems: 'center' }}>
            <button className="btn" onClick={onBook}>{CONTENT.hero.cta}</button>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <Photo src={PHOTOS.portrait} ratio="4 / 5" position="center 20%" label="Justina Lydia" />
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section data-sec="about" id="about" className="pad about-grid" style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div className="about-sticky">
        <Photo src={PHOTOS.yellow} ratio="1 / 1" position="center 28%" label="Justina, candid" />
      </div>
      <div>
        <div className="eyebrow">About</div>
        <h2 className="about-h2" style={{
          fontFamily: T.serif, fontWeight: 400, lineHeight: 1.05,
          letterSpacing: '-0.02em', margin: '10px 0 32px',
        }}>
          {CONTENT.about.h2}
        </h2>
        {CONTENT.about.paras.map((p, i) => (
          <p key={i} style={{ fontSize: 18, lineHeight: 1.65, color: T.inkSoft, margin: '0 0 22px', maxWidth: 540 }}>{p}</p>
        ))}
        <div className="about-cred" style={{ marginTop: 40, padding: '24px 0', borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
          {CONTENT.about.creds.map((c, i) => (
            <div key={i}>
              <div className="eyebrow">{c.label}</div>
              <div style={{ fontFamily: T.serif, fontSize: 20, marginTop: 4 }}>{c.val}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CircuitTrace() {
  // Subtle horizontal circuit trace across the four steps. Pure decoration.
  return (
    <svg className="trace" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id="traceGrad" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="oklch(60% 0.04 60)" stopOpacity="0.5"/>
          <stop offset="65%" stopColor="oklch(72% 0.10 55)" stopOpacity="0.7"/>
          <stop offset="100%" stopColor="oklch(82% 0.18 75)" stopOpacity="1"/>
        </linearGradient>
      </defs>
      <path
        d="M 30 12 L 280 12 L 295 4 L 580 4 L 595 20 L 880 20 L 895 12 L 1170 12"
        fill="none"
        stroke="url(#traceGrad)"
        strokeWidth="1.2"
      />
      {[30, 300, 600, 900, 1170].map((cx, i) => (
        <circle
          key={i}
          cx={cx}
          cy={i === 1 ? 4 : i === 2 ? 4 : i === 3 ? 20 : 12}
          r={i === 4 ? 3.5 : 2.2}
          fill={i === 4 ? 'oklch(82% 0.18 75)' : 'oklch(72% 0.07 55)'}
        />
      ))}
    </svg>
  );
}

function Method() {
  const m = CONTENT.method;
  return (
    <section data-sec="method" id="method" data-nav-theme="dark" style={{ background: T.ink, color: T.page }}>
      <div className="pad" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="method-head">
          <div>
            <div className="eyebrow" style={{ color: 'oklch(72% 0.02 70)' }}>{m.eyebrow}</div>
            <h2 className="method-h2" style={{
              fontFamily: T.serif, fontWeight: 400, lineHeight: 1.05,
              letterSpacing: '-0.02em', margin: '10px 0 0',
            }}>
              {m.h2Lead} <span style={{ fontStyle: 'italic', color: T.glow }}>{m.h2Accent}</span>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'oklch(82% 0.012 70)', fontWeight: 300, margin: 0, maxWidth: 540 }}>
            {m.intro}
          </p>
        </div>

        <div className="steps">
          <CircuitTrace />
          {m.steps.map((s, i) => (
            <div key={i} className={`step${i === m.steps.length - 1 ? ' lit' : ''}`}>
              <div className="step-num">{s.n}</div>
              <div className="step-icon" aria-hidden="true">{s.icon}</div>
              <h3 className="step-name">{s.name}</h3>
              <div className="step-sub">{s.sub}</div>
              <p className="step-d">{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 96, padding: '40px 0 0',
          borderTop: '1px solid oklch(32% 0.02 55)',
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56,
        }}>
          <div>
            <div className="eyebrow" style={{ color: 'oklch(72% 0.02 70)' }}>{m.closing.eyebrow}</div>
            <div style={{
              fontFamily: T.serif, fontSize: 32, fontStyle: 'italic',
              marginTop: 10, letterSpacing: '-0.015em', color: T.glow,
            }}>{m.closing.title}</div>
          </div>
          <p style={{
            fontSize: 18, lineHeight: 1.7, color: 'oklch(86% 0.012 70)',
            fontWeight: 300, margin: 0, maxWidth: 680,
          }}>
            {m.closing.body}
          </p>
        </div>
      </div>
    </section>
  );
}

function Offerings({ onBook }) {
  return (
    <section data-sec="offerings" id="offerings" className="pad" style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 48 }}>
        <div className="eyebrow">Offerings</div>
        <h2 style={{
          fontFamily: T.serif, fontWeight: 400, fontSize: 'clamp(36px, 5vw, 52px)',
          lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0',
        }}>
          Four ways to <span style={{ fontStyle: 'italic', color: T.accentInk }}>work together</span>.
        </h2>
      </div>
      <div className="offer-grid">
        {CONTENT.offerings.map((o, i) => (
          <div key={i} className={`offer${o.featured ? ' featured' : ''}`}>
            <div className="eyebrow offer-tag">{o.tag}</div>
            <div style={{ fontFamily: T.serif, fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.01em' }}>{o.name}</div>
            <div className="eyebrow" style={{ color: T.inkFaint }}>{o.len}</div>
            <div style={{ fontSize: 15.5, lineHeight: 1.6, color: T.inkSoft }}>{o.note}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 0', fontSize: 14.5, lineHeight: 1.7, color: T.inkSoft }}>
              {o.bullets.map((b, j) => (
                <li key={j} style={{ display: 'flex', gap: 10 }}>
                  <span style={{ color: T.accent, fontFamily: T.mono, fontSize: 12, marginTop: 2, flexShrink: 0 }}>·</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <button className="btn ghost" onClick={onBook} style={{ alignSelf: 'flex-start', marginTop: 'auto' }}>
              {o.featured ? 'Book discovery call' : 'Inquire'}
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}

function Couples({ onBook }) {
  const c = CONTENT.couples;
  return (
    <section data-sec="couples" id="couples" data-nav-theme="dark" className="couples">
      <div className="pad" style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div className="eyebrow" style={{ color: 'oklch(72% 0.02 70)' }}>{c.eyebrow}</div>
        <h2 style={{
          fontFamily: T.serif, fontWeight: 400, fontSize: 'clamp(34px, 4.5vw, 48px)',
          lineHeight: 1.05, letterSpacing: '-0.02em', margin: '12px 0 32px',
        }}>
          {c.h2}
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.7, color: 'oklch(85% 0.012 70)', fontWeight: 300, maxWidth: 760, margin: '0 0 64px' }}>
          {c.lead}
        </p>

        <div className="couples-grid">
          <div>
            <div className="eyebrow" style={{ color: T.glow, marginBottom: 18 }}>{c.sessionTitle}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
              {c.sessionItems.map((it, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 16, lineHeight: 1.6, color: 'oklch(86% 0.012 70)', fontWeight: 300, paddingTop: 14, borderTop: '1px solid oklch(32% 0.02 55)' }}>
                  <span style={{ fontFamily: T.mono, fontSize: 11, color: T.glow, marginTop: 4, flexShrink: 0, letterSpacing: '0.1em' }}>{String(i + 1).padStart(2, '0')}</span>
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ color: T.glow, marginBottom: 18 }}>{c.forYouTitle}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
              {c.forYouItems.map((it, i) => (
                <li key={i} style={{ fontSize: 18, lineHeight: 1.55, color: T.page, fontFamily: T.serif, fontStyle: 'italic', paddingTop: 14, borderTop: '1px solid oklch(32% 0.02 55)', letterSpacing: '-0.005em' }}>
                  {it}
                </li>
              ))}
            </ul>
            <button className="btn copper" onClick={onBook} style={{ marginTop: 36 }}>
              Book a couples reset
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [i, setI] = React.useState(0);
  const total = CONTENT.testimonials.length;
  React.useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % total), 9000);
    return () => clearInterval(id);
  }, [total]);
  const t = CONTENT.testimonials[i];
  return (
    <section className="pad" style={{ maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
      <div className="eyebrow" style={{ marginBottom: 36 }}>From clients</div>
      <blockquote key={i} className="testimonial-q" style={{
        fontFamily: T.serif, fontStyle: 'italic', fontWeight: 400,
        lineHeight: 1.3, letterSpacing: '-0.005em',
        margin: 0, color: T.ink,
        animation: 'fadeIn 0.6s ease',
      }}>
        &ldquo;{t.q}&rdquo;
      </blockquote>
      <div style={{ marginTop: 32, fontSize: 13.5, color: T.inkFaint, fontFamily: T.mono, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        {t.by}
      </div>
      <div style={{ marginTop: 36, display: 'flex', gap: 10, justifyContent: 'center' }}>
        {CONTENT.testimonials.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Testimonial ${k + 1}`} style={{
            width: 24, height: 3, border: 0, padding: 0, cursor: 'pointer',
            background: k === i ? T.accent : T.line, transition: 'background .25s',
          }}/>
        ))}
      </div>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      `}</style>
    </section>
  );
}

function Footer({ onBook }) {
  return (
    <footer className="pad-foot" style={{ background: T.ink, color: T.page }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, paddingBottom: 64, borderBottom: '1px solid #3a302a' }}>
          <div style={{ flex: '2 1 420px', minWidth: 280 }}>
            <div className="footer-cta" style={{ fontFamily: T.serif, fontStyle: 'italic', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Start with a<br/>discovery call.
            </div>
            <div style={{ marginTop: 28, color: '#c4b8a8', fontSize: 16, maxWidth: 420, lineHeight: 1.6 }}>
              We talk through what is stuck, what you want to move, and whether this is a fit.
            </div>
            <button className="btn" onClick={onBook} style={{ marginTop: 28, background: T.page, color: T.ink }}>
              Book discovery call
            </button>
          </div>
          <div style={{ flex: '1 1 200px', minWidth: 180 }}>
            <div className="eyebrow" style={{ color: '#b2a595' }}>Contact</div>
            <div style={{ marginTop: 14, fontFamily: T.serif, fontSize: 18, lineHeight: 1.7 }}>
              <a href={`mailto:${CONTENT.contact.email}`} style={{ color: T.page, textDecoration: 'none', borderBottom: `1px solid ${T.accent}`, paddingBottom: 1 }}>{CONTENT.contact.email}</a><br/>
              {CONTENT.contact.location}<br/>
              {CONTENT.contact.hours}
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 28, display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', fontSize: 12, color: '#9c8f7f', fontFamily: T.mono, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          <div>© 2026 Justina Lydia · Coherence Coaching</div>
          <div>Bright, steady, and your own.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Site });