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

function DirectionC() {
  return (
    <div className="dirC">
      <div className="grain"/>
      <nav className="nav">
        <div className="nav-logo">NAY<em>·</em>SAY</div>
        <a href="#contact" className="nav-cta">Start a project</a>
      </nav>

      {/* HERO */}
      <section className="hero">
        <h1 className="hero-mid">
          <RevealTextC as="div" className="row" delay={0.05}>WE BUILD</RevealTextC>
          <RevealTextC as="div" className="row italic" delay={0.15}>
            <span className="inline-oval">brave</span> brands
          </RevealTextC>
          <RevealTextC as="div" className="row" delay={0.25}>
            <span className="word-outline">FOR PEOPLE</span>
          </RevealTextC>
          <RevealTextC as="div" className="row" delay={0.35}>
            WHO SAY <span className="word-accent">NO.</span>
          </RevealTextC>
        </h1>

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

      {/* TICKER */}
      <div className="ticker-strip">
        <MarqueeC duration={60}>
          {Array.from({length:8}).map((_, k) => (
            <span key={k}>
              HEMLOCK COFFEE <span className="dot">◆</span> PARALLAX <span className="dot">◆</span> MIRA LABS <span className="dot">◆</span> QUIET TYPE CO <span className="dot">◆</span> FIELDNOTES <span className="dot">◆</span> ORBIT FM <span className="dot">◆</span>
            </span>
          ))}
        </MarqueeC>
      </div>

      {/* SERVICES */}
      <section className="section" id="services">
        <RevealC><div className="section-eye"><span>[ 01 ]</span> Capabilities</div></RevealC>
        <RevealC delay={0.08}>
          <h2 className="section-title">
            A studio of <span className="italic">five</span> <span className="accent">disciplines.</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> Process</div></RevealC>
        <RevealC delay={0.08}>
          <h2 className="section-title">
            Four <span className="italic">moves.</span><br/>
            <span className="accent">Nothing more.</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">
            From the <span className="italic">desk.</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}>LET'S BUILD</RevealTextC>
          <RevealTextC as="div" delay={0.15}><em>something</em></RevealTextC>
          <RevealTextC as="div" delay={0.25}><span className="stroke">WORTH KEEPING.</span></RevealTextC>
        </h1>
        <RevealC delay={0.4}>
          <p className="cta-sub">
            We take on a handful of projects each year. If you think yours might be one of them, tell us what you're up against.
          </p>
          <a href="mailto:hello@naysay.agency" className="cta-btn">
            hello@naysay.agency
            <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>
          </a>
        </RevealC>
      </section>

      <div className="footer-grid">
        <div>
          <strong>Naysay Agency</strong>
          12 Albert Road, Woodstock<br/>Cape Town 7925
        </div>
        <div>
          <strong>Contact</strong>
          <a href="mailto:hello@naysay.agency">hello@naysay.agency</a>
        </div>
      </div>
      <div className="footer-legal">
        <span>© 2026 Naysay Agency LLC</span>
        <span>Designed & built in Cape Town</span>
        <span>v2.6.0</span>
      </div>
    </div>
  );
}

window.DirectionC = DirectionC;