/* global React, ReactDOM */
const { useEffect } = React;

const APPLY_URL = 'https://sway9.com/creator/perla';

function PerlaHeader() {
  return (
    <header className="perla-header">
      <div className="max-w-[1080px] mx-auto px-6 md:px-10 h-[72px] flex items-center justify-between">
        <a href="perla-creators.html" className="perla-wordmark" aria-label="Perla">
          <span className="perla-pearl" aria-hidden="true" />
          <span className="wm-text">Perla</span>
        </a>
      </div>
    </header>
  );
}

function PerlaFooter() {
  return (
    <footer className="perla-footer">
      <div className="max-w-[1080px] mx-auto px-6 md:px-10">
        <div className="row">
          <div>© 2026 Mb Core Habits</div>
          <div className="flex items-center gap-5">
            <a href="privacy-policy.html">Privacy policy</a>
            <a href="privacy-notice.html">Privacy notice</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function PlusIcon({ size = 11 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M6 1.5v9M1.5 6h9"/>
    </svg>
  );
}

function CreatorsLanding() {
  return (
    <div className="perla-page">
      <PerlaHeader />

      <main>
        <section className="perla-hero">
          <div className="max-w-[1080px] mx-auto px-6 md:px-10">
            <span className="eyebrow-tag">
              <span className="dot" aria-hidden="true" />
              Perla Creator Program
            </span>
            <h1>
              Get paid for creating<br/>manifestation content
            </h1>
            <p className="lead">
              Join our creator campaigns, post about the app, and get paid per post.
            </p>
            <div className="mt-8">
              <a href={APPLY_URL} className="btn-pill btn-pill-dark">
                Apply now
                <span className="icon-mark"><PlusIcon /></span>
              </a>
            </div>
          </div>
        </section>

        <section className="perla-section">
          <div className="max-w-[1080px] mx-auto px-6 md:px-10">
            <h2>How it works</h2>
            <p><strong>1. Apply in about two minutes.</strong> Tell us where you post and what you make. We review every application.</p>
            <p><strong>2. Get matched to a campaign.</strong> Each campaign comes with a short brief — what it&apos;s about, what to include, and the format if that campaign calls for a specific one.</p>
            <p><strong>3. Create the post.</strong> Reaction video, a slideshow, etc. — whatever the brief asks for, in your voice.</p>
            <p><strong>4. Get paid per post</strong>, with room to earn more as we find together what works.</p>
          </div>
        </section>

        <section className="perla-section">
          <div className="max-w-[1080px] mx-auto px-6 md:px-10">
            <h2>Who we&apos;re looking for</h2>
            <p>
              Mostly people who already use Perla. If the app is genuinely part of your mornings, you
              already have the one thing we can&apos;t brief into existence — a real relationship with
              the product. Add a love for manifestation, affirmations, or journaling, and you&apos;re
              exactly who we&apos;re looking for.
            </p>
          </div>
        </section>

        <section className="perla-section">
          <div className="max-w-[1080px] mx-auto px-6 md:px-10">
            <h2>What a campaign brief looks like</h2>
            <p>
              Every campaign is different. Some are open — post about Perla however you like. Others are
              specific, because we&apos;re testing a format we think will land: a particular hook, a
              structure to follow, a feature to show on screen. The brief always tells you which it is
              before you create anything.
            </p>
          </div>
        </section>

        <section className="perla-cta-row">
          <div className="max-w-[1080px] mx-auto px-6 md:px-10">
            <a href={APPLY_URL} className="btn-pill btn-pill-dark">
              Apply now
              <span className="icon-mark"><PlusIcon /></span>
            </a>
            <div className="helper">Takes about 2 minutes. We review every application.</div>
          </div>
        </section>
      </main>

      <PerlaFooter />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CreatorsLanding />);