const { Reveal: RevealC, RevealText: RevealTextC, Marquee: MarqueeC, LiveClock: LiveClockC, SERVICES: SERVICES_C, PROCESS: PROCESS_C, JOURNAL: JOURNAL_C } = window;

function ContactForm() {
  const [state, setState] = React.useState('idle');
  const [err, setErr] = React.useState('');
  async function submit(e) {
    e.preventDefault();
    const fd = new FormData(e.target);
    setState('sending');
    setErr('');
    try {
      const r = await fetch('/contact.php', { method: 'POST', body: fd });
      const j = await r.json();
      if (j.ok) { setState('done'); }
      else { setState('idle'); setErr(j.error || 'Something broke — please try again.'); }
    } catch (_) {
      setState('idle'); setErr('Something broke — please try again.');
    }
  }
  if (state === 'done') {
    return <p className="form-done">Got it. We read everything, and we reply within two working days.</p>;
  }
  return (
    <form className="contact-form" onSubmit={submit}>
      <input type="text" name="company" className="hp-field" tabIndex="-1" autoComplete="off" aria-hidden="true" />
      <div className="form-row">
        <input required name="name" placeholder="Your name" maxLength="120" />
        <input required type="email" name="email" placeholder="Email" maxLength="200" />
      </div>
      <textarea required name="message" placeholder="What are you up against?" rows="5" maxLength="4000"></textarea>
      {err && <p className="form-err">{err}</p>}
      <button className="cta-btn form-btn" type="submit" disabled={state === 'sending'}>
        {state === 'sending' ? 'Sending…' : 'Get in touch'}
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.8"/>
        </svg>
      </button>
    </form>
  );
}

function DirectionC() {
  return (
    <div className="dirC">
      <div className="grain"/>
      <nav className="nav">
        <div className="nav-logo">NAY<em>·</em>BERRY</div>
        <div className="nav-right">
          <a href="/jobs/" className="nav-link">Jobs</a>
          <a href="#contact" className="nav-cta">Work with us</a>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        <h1 className="hero-mid">
          <RevealTextC as="div" className="row" delay={0.05}>WE MAKE</RevealTextC>
          <RevealTextC as="div" className="row italic" delay={0.15}>
            <span className="inline-oval">stubborn</span> brands
          </RevealTextC>
          <RevealTextC as="div" className="row" delay={0.25}>
            <span className="word-outline">FOR FOUNDERS</span>
          </RevealTextC>
          <RevealTextC as="div" className="row" delay={0.35}>
            WHO WON'T <span className="word-accent">BUDGE.</span>
          </RevealTextC>
        </h1>

        <div className="hero-bottom-bar" style={{justifyContent:'center'}}>
          <div className="scroll-cue">
            <span>Keep scrolling</span>
            <span className="line"/>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section" id="services">
        <RevealC><div className="section-eye"><span>[ 01 ]</span> The work</div></RevealC>
        <RevealC delay={0.08}>
          <h2 className="section-title">
            Five crafts, <span className="italic">one</span> <span className="accent">opinion.</span>
          </h2>
        </RevealC>
        <div className="services-stack">
          {SERVICES_C.map((s, i) => (
            <RevealC key={s.num} delay={i * 0.05}>
              <div className="svc">
                <div className="svc-num">[ {s.num} ]</div>
                <div className="svc-name">{s.name}</div>
                <div className="svc-desc">{s.desc}</div>
                <div className="svc-tags">
                  {s.tags.map(t => <span key={t} className="svc-tag">{t}</span>)}
                </div>
              </div>
            </RevealC>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section className="section" id="process" style={{paddingTop: 0}}>
        <RevealC><div className="section-eye"><span>[ 02 ]</span> How it runs</div></RevealC>
        <RevealC delay={0.08}>
          <h2 className="section-title">
            Four <span className="italic">steps.</span><br/>
            <span className="accent">Zero padding.</span>
          </h2>
        </RevealC>
        <div className="process-timeline">
          {PROCESS_C.map((p, i) => (
            <RevealC key={p.num} delay={i * 0.08}>
              <div className="proc-card">
                <div className="proc-badge">
                  <span>Step</span>
                  <strong>{p.num}</strong>
                </div>
                <h4>{p.name}</h4>
                <p>{p.desc}</p>
              </div>
            </RevealC>
          ))}
        </div>
      </section>

      {/* JOURNAL */}
      <section className="section" id="journal" style={{paddingTop: 0}}>
        <RevealC><div className="section-eye"><span>[ 03 ]</span> Journal</div></RevealC>
        <RevealC delay={0.08}>
          <h2 className="section-title">
            Notes from the <span className="italic">floor.</span>
          </h2>
        </RevealC>
        <div className="journal-grid">
          {JOURNAL_C.map((j, i) => (
            <RevealC key={j.title} delay={i * 0.08}>
              <a className="jc jc-link" href={`/journal/${j.slug}/`}>
                <div className="jc-img jc-img-photo">
                  <img src={`/journal/img/${j.slug}.svg?v=2`} alt=""/>
                </div>
                <div className="jc-meta">
                  <span>{j.cat}</span>
                  <span>{j.date}</span>
                </div>
                <h3>{j.title}</h3>
                <div className="jc-read">
                  Read · {j.read}
                  <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.5"/>
                  </svg>
                </div>
              </a>
            </RevealC>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="cta-wrap" id="contact">
        <RevealC><div className="section-eye" style={{justifyContent:'center'}}><span>[ 04 ]</span> Contact</div></RevealC>
        <h1 className="cta-type">
          <RevealTextC as="div" delay={0.05}>BRING US</RevealTextC>
          <RevealTextC as="div" delay={0.15}><em>the brief</em></RevealTextC>
          <RevealTextC as="div" delay={0.25}><span className="stroke">NOBODY ELSE WANTED.</span></RevealTextC>
        </h1>
        <RevealC delay={0.4}>
          <p className="cta-sub">
            The roster stays short on purpose — a few clients at a time, never more. Tell us what you're trying to change and we'll tell you, honestly, whether we're the right hands for it.
          </p>
          <ContactForm />
        </RevealC>
      </section>

      <div className="footer-grid">
        <div>
          <strong>Nayberry Agency</strong>
        </div>
        <div>
          <strong>Studio</strong>
          <a href="/jobs/">Jobs</a>
        </div>
        <div>
          <strong>Contact</strong>
          <a href="#contact">Get in touch</a>
        </div>
      </div>
      <div className="footer-legal">
        <span>© 2026 Nayberry Agency LLC</span>
        <span>v1.0</span>
      </div>
    </div>
  );
}

window.DirectionC = DirectionC;