// ============================================================
// HOME — All sections restored. Eyebrow labels removed.
// H1/statement text uses full page width.
// ============================================================

function HomeScreen({ go, param }) {
  // Voice tweak: listen for changes and re-render
  const [voice, setVoice] = React.useState(() => window.__voice || VOICE_MAP.consulting);
  React.useEffect(() => {
    const handler = () => setVoice({ ...(window.__voice || VOICE_MAP.consulting) });
    window.addEventListener('voice-change', handler);
    return () => window.removeEventListener('voice-change', handler);
  }, []);

  React.useEffect(() => {
    if (param === 'contact') {
      const t = setTimeout(() => {
        const el = document.getElementById('contact');
        if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
      }, 80);
      return () => clearTimeout(t);
    }
  }, [param]);

  return (
    <div className="screen-enter" data-screen-label="Home">
      {/* ---------- HERO ---------- */}
      <section className="hero" data-screen-label="Hero">
        <FieldGrid />
        <div className="container">
          <div className="hero-full">
            <Reveal delay={60}>
              <h1 className="hero-headline" style={{ width: "700px" }}>
                {voice.hero} <em>{voice.heroEm}</em>
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p className="hero-lead" style={{ width: "700px" }}>{voice.lead}</p>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero-role">Currently UX Design Architect at Optum</p>
            </Reveal>
            <Reveal delay={200}>
              <div className="actions">
                <Button variant="primary" icon="arrow-right" onClick={() => go('work')}>See selected work</Button>
                <a className="btn btn-ghost" href={`mailto:${PROFILE.email}`}>Start a conversation <Icon name="arrow-up-right" size={16} /></a>
              </div>
            </Reveal>
          </div>
          <Reveal className="hero-accent" delay={300}>
            <SystemMap style={{ width: 160, opacity: 0.85 }} />
          </Reveal>
        </div>
      </section>

      <div className="container"><hr className="rule" /></div>

      {/* ---------- PHILOSOPHY ---------- */}
      <section className="section" data-screen-label="Philosophy">
        <div className="container">
          <Reveal>
            <h2 className="section-statement">{voice.philo}</h2>
            <p className="section-sub">A point of view shaped over years inside enterprise systems, on complexity, ambiguity, decisions, and how people and AI should work together.</p>
          </Reveal>
          <div className="think-grid">
            {THINKING.map((t, i) =>
            <Reveal className="think-item" key={i} delay={i * 40}>
                <h3>{t.term}</h3>
                <p>{t.body}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* ---------- CAPABILITIES ---------- */}
      <section className="section band" data-screen-label="Capabilities">
        <div className="container">
          <Reveal>
            <h2 className="section-statement">{voice.cap}</h2>
            <p className="section-sub">Different engagements, the same underlying work: find the structure, design for the decision, and leave the team aligned.</p>
          </Reveal>
          <div className="pillars">
            {PILLARS.map((p, i) =>
            <Reveal className="pillar" key={i} delay={i * 60}>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* ---------- PROBLEM AREAS ---------- */}
      <section className="section" data-screen-label="Problem areas">
        <div className="container">
          <Reveal>
            <h2 className="section-statement">{voice.problem}</h2>
            <p className="section-sub">The problems that tend to land on my desk. Usually high-stakes, often involving AI, always more tangled than they first appear.</p>
          </Reveal>
          <div className="help-grid">
            {HELP.map((h, i) =>
            <Reveal className="help-item" key={i} delay={i * 30}>
                <div className="hi-title">
                  <span className="hi-mark">+</span>
                  <h3>{h.label}</h3>
                </div>
                <p>{h.body}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* ---------- WORKING MODEL ---------- */}
      <section className="section" data-screen-label="Working model">
        <div className="container">
          <Reveal>
            <h2 className="section-statement">{voice.model}</h2>
            <p className="section-sub">{WORKING_MODEL.lead}</p>
          </Reveal>
          <div className="model-roles" style={{ marginTop: 'var(--space-7)' }}>
            {WORKING_MODEL.roles.map((r, i) =>
            <Reveal className="model-role" key={i} delay={i * 60}>
                <h3>{r.title}</h3>
                <p>{r.body}</p>
              </Reveal>
            )}
          </div>
          </div>
      </section>

      {/* ---------- CONTACT ---------- */}
      <section className="section contact band" id="contact" data-screen-label="Contact">
        <div className="container">
          <div className="contact-grid">
            <Reveal>
              <h2 className="contact-h">{voice.contact}</h2>
              <p className="contact-lead">If you are wrestling with a complex product decision, especially one involving AI, enterprise scale, or teams that need to align, I would be glad to think it through with you.</p>
            </Reveal>
            <Reveal className="contact-card" delay={100}>
              <a className="contact-link" href={`mailto:${PROFILE.email}`}>
                <Icon name="mail" size={18} />
                <span className="cl-text"><span className="cl-k">Email</span><span className="cl-v">{PROFILE.email}</span></span>
              </a>
              <a className="contact-link" href={PROFILE.linkedin} target="_blank" rel="noopener">
                <Icon name="arrow-up-right" size={18} />
                <span className="cl-text"><span className="cl-k">LinkedIn</span><span className="cl-v">in/vivek-arasan</span></span>
              </a>
              <a className="contact-link" href={PROFILE.substack} target="_blank" rel="noopener">
                <Icon name="arrow-up-right" size={18} />
                <span className="cl-text"><span className="cl-k">Quiet Signals</span><span className="cl-v">vivekrzn.substack.com</span></span>
              </a>
            </Reveal>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { HomeScreen });