// Section components for the Kaijustudio.ai landing page

const Nav = ({ variant }) => {
  return (
    <nav className="ks-nav">
      <div className="ks-nav-inner">
        <a href="#" className="ks-wordmark">
          <span className="ks-wordmark-main">Kaijustudio</span><span className="ks-wordmark-tld">.ai</span>
        </a>
        <div className="ks-nav-links">
          <a href="#approach">Approach</a>
          <a href="#about">About</a>
          <a href="#work">Work</a>
          <a href="#writing">Writing</a>
        </div>
        <a href="#contact" className="ks-nav-cta">
          <span>Start a conversation</span>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4L7 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </nav>
  );
};

const Hero = ({ variant }) => {
  return (
    <section className="ks-hero" data-comment-anchor="hero">
      <div className="ks-hero-bg" aria-hidden="true">
        {variant === 'nebula' && (
          <>
            <div className="ks-glow ks-glow-violet"></div>
            <div className="ks-glow ks-glow-indigo"></div>
            <div className="ks-grain"></div>
          </>
        )}
        {variant === 'circuit' && (
          <>
            <div className="ks-circuit-grid"></div>
            <div className="ks-glow ks-glow-magenta"></div>
            <div className="ks-glow ks-glow-cyan"></div>
          </>
        )}
        {variant === 'aurora' && (
          <>
            <div className="ks-aurora-1"></div>
            <div className="ks-aurora-2"></div>
            <div className="ks-aurora-3"></div>
            <div className="ks-grain"></div>
          </>
        )}
      </div>

      <div className="ks-hero-inner">
        <div className="ks-eyebrow">
          <span className="ks-dot"></span>
          <span>AI strategy &amp; integration for human-led businesses</span>
        </div>

        <h1 className="ks-h1">
          Your competitors are <em>automating</em>.<br/>
          Your customers are still <em>human</em>.
        </h1>

        <p className="ks-subhead">
          I help business leaders cut through the noise, find the AI that actually fits their business, and build it in a way their people can use — without losing what makes them good at what they do.
        </p>

        <div className="ks-hero-actions">
          <a href="#contact" className="ks-btn ks-btn-primary">
            <span>Start a conversation</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#approach" className="ks-btn ks-btn-ghost">
            <span>How I work</span>
          </a>
        </div>

        <div className="ks-hero-meta">
          <div className="ks-meta-item">
            <div className="ks-meta-num">30<span>yrs</span></div>
            <div className="ks-meta-label">studying how humans actually work</div>
          </div>
          <div className="ks-meta-divider"></div>
          <div className="ks-meta-item">
            <div className="ks-meta-num">1:1</div>
            <div className="ks-meta-label">no decks, no playbooks, no junior associates</div>
          </div>
          <div className="ks-meta-divider"></div>
          <div className="ks-meta-item">
            <div className="ks-meta-num">0<span>jargon</span></div>
            <div className="ks-meta-label">translated into language your team uses</div>
          </div>
        </div>
      </div>

      <div className="ks-hero-scroll" aria-hidden="true">
        <span>Scroll</span>
        <div className="ks-scroll-line"></div>
      </div>
    </section>
  );
};

const Problem = () => {
  return (
    <section className="ks-section ks-problem" id="approach" data-comment-anchor="problem">
      <div className="ks-section-inner">
        <div className="ks-section-label">
          <span className="ks-label-num">01</span>
          <span className="ks-label-text">The problem</span>
        </div>

        <div className="ks-problem-grid">
          <div className="ks-problem-lead">
            <h2 className="ks-h2">
              The pressure is real.
            </h2>
            <p className="ks-lede">
              Your board wants an AI strategy. Your competitors are making announcements. Every vendor is telling you that if you don't move now, you'll be left behind.
            </p>
          </div>

          <div className="ks-problem-body">
            <p className="ks-body-lg">
              What nobody is telling you: most of what's being sold is expensive, complex, and built for businesses that don't look like yours.
            </p>
            <p className="ks-pull">
              You don't need a transformation. You need clarity.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Positioning = () => {
  return (
    <section className="ks-section ks-positioning" data-comment-anchor="positioning">
      <div className="ks-section-inner">
        <div className="ks-section-label">
          <span className="ks-label-num">02</span>
          <span className="ks-label-text">The lane I own</span>
        </div>

        <blockquote className="ks-positioning-quote">
          <span className="ks-quote-mark" aria-hidden="true">“</span>
          <p>
            I translate <span className="ks-grad-text">AI</span> into <span className="ks-grad-text">human</span> — so your business stays yours.
          </p>
        </blockquote>
      </div>
    </section>
  );
};

const Credibility = () => {
  return (
    <section className="ks-section ks-credibility" id="about" data-comment-anchor="credibility">
      <div className="ks-section-inner">
        <div className="ks-credibility-grid">
          <div className="ks-credibility-portrait" aria-hidden="true">
            <div className="ks-portrait-frame">
              <div className="ks-portrait-glow"></div>
              <div className="ks-portrait-placeholder">
                <span>portrait</span>
                <span className="ks-portrait-meta">4:5 · drop-in slot</span>
              </div>
            </div>
            <div className="ks-portrait-caption">
              <span>James Hallett</span>
              <span className="ks-portrait-sub">Founder, Kaijustudio.ai</span>
            </div>
          </div>

          <div className="ks-credibility-body">
            <div className="ks-section-label">
              <span className="ks-label-num">03</span>
              <span className="ks-label-text">Why this works</span>
            </div>

            <h2 className="ks-h2">
              I didn't come from software.
            </h2>

            <p className="ks-body-lg">
              I came from <strong>thirty years of studying how humans work</strong> — as a Yale-trained actor, a dreamwork practitioner, and a coach.
            </p>

            <p className="ks-body">
              That background turns out to be exactly the right preparation for the one thing most AI consultants can't do: understand what your business actually needs <em>before</em> recommending a single tool.
            </p>

            <ul className="ks-cred-list">
              <li><span className="ks-cred-marker"></span><span>Yale School of Drama</span></li>
              <li><span className="ks-cred-marker"></span><span>Certified dreamwork practitioner</span></li>
              <li><span className="ks-cred-marker"></span><span>Executive &amp; leadership coach</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

const Promise = () => {
  return (
    <section className="ks-section ks-promise" id="work" data-comment-anchor="promise">
      <div className="ks-section-inner">
        <div className="ks-section-label">
          <span className="ks-label-num">04</span>
          <span className="ks-label-text">The promise</span>
        </div>

        <h2 className="ks-h2 ks-promise-head">
          By the time we're done, you'll know exactly where AI <em>belongs</em> in your business, where it <em>doesn't</em>, and how to move forward with confidence.
        </h2>

        <div className="ks-promise-trio">
          <div className="ks-promise-card">
            <div className="ks-promise-num">i.</div>
            <h3>Where it belongs</h3>
            <p>The two or three places in your business where AI will compound — and the order to build them in.</p>
          </div>
          <div className="ks-promise-card">
            <div className="ks-promise-num">ii.</div>
            <h3>Where it doesn't</h3>
            <p>The places everyone is telling you to automate, that you absolutely shouldn't. (Usually the ones that make you, you.)</p>
          </div>
          <div className="ks-promise-card">
            <div className="ks-promise-num">iii.</div>
            <h3>How to move</h3>
            <p>A plan your team can actually execute — without adding the kind of complexity you'll regret in six months.</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const Contact = () => {
  return (
    <section className="ks-section ks-contact" id="contact" data-comment-anchor="contact">
      <div className="ks-section-inner">
        <div className="ks-contact-card">
          <div className="ks-contact-bg" aria-hidden="true">
            <div className="ks-glow ks-glow-violet"></div>
            <div className="ks-glow ks-glow-magenta"></div>
          </div>
          <div className="ks-contact-inner">
            <div className="ks-eyebrow ks-eyebrow-light">
              <span className="ks-dot"></span>
              <span>Currently taking on three new engagements for Q3</span>
            </div>
            <h2 className="ks-h1 ks-contact-head">
              Let's find the AI that <em>fits</em>.
            </h2>
            <p className="ks-subhead ks-contact-sub">
              A 30-minute conversation. No pitch deck, no commitment. We talk about your business, the pressure you're under, and whether what I do is what you need.
            </p>
            <div className="ks-hero-actions">
              <a href="mailto:hello@kaijustudio.ai" className="ks-btn ks-btn-primary">
                <span>Start a conversation</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L8 3m5 5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a href="mailto:hello@kaijustudio.ai" className="ks-btn ks-btn-ghost">
                <span>hello@kaijustudio.ai</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="ks-footer">
      <div className="ks-footer-inner">
        <div className="ks-footer-brand">
          <span className="ks-wordmark-main">Kaijustudio</span><span className="ks-wordmark-tld">.ai</span>
        </div>
        <div className="ks-footer-tag">AI translated into human.</div>
        <div className="ks-footer-meta">© 2026 · James Hallett</div>
      </div>
    </footer>
  );
};

Object.assign(window, { Nav, Hero, Problem, Positioning, Credibility, Promise, Contact, Footer });
