// Creators page
const CreatorsPage = ({ setRoute }) => {
  const iconProps = {
    width: 40, height: 40, viewBox: "0 0 24 24",
    fill: "none", stroke: "var(--c-gold-1)",
    strokeWidth: 0.9, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true,
  };
  const tiers = [
    {
      n: "Storyteller", s: "Open to All",
      p: "For everyday travelers starting to share real experiences. Free profile, stories, and booking attributions from your very first trip.",
      badges: "Photography · Writing · Journaling",
      icon: (
        <svg {...iconProps}>
          {/* Compass rose — 8 thin radiating lines, small center dot, faint outer ring */}
          <circle cx="12" cy="12" r="8.5"/>
          <path d="M12 3.5v17"/>
          <path d="M3.5 12h17"/>
          <path d="M6 6l12 12"/>
          <path d="M18 6L6 18"/>
          <circle cx="12" cy="12" r="0.6" fill="var(--c-gold-1)"/>
        </svg>
      ),
    },
    {
      n: "Pro Storyteller", s: "Auto-Promoted",
      p: "Portfolio tools, enhanced analytics, collection features, and featured-story eligibility — unlocked automatically as you publish.",
      badges: "Photography · Film · Drone · Long-Form",
      icon: (
        <svg {...iconProps}>
          {/* Refined ink nib — narrow teardrop with center slit and tine point */}
          <path d="M12 3l3.4 11L12 21l-3.4-7z"/>
          <path d="M12 9.5v8.5"/>
          <path d="M10.4 14h3.2"/>
        </svg>
      ),
    },
    {
      n: "Elite Storyteller", s: "By Application",
      p: "Verified creator badge, priority placement across the platform, hand-curated brand match-making, and advanced commission rates.",
      badges: "Film · Drone · Underwater · 360° · Editorial",
      icon: (
        <svg {...iconProps}>
          {/* Slim asymmetric laurel sprig — single curved branch with 6 small leaves */}
          <path d="M5.5 20C8 16 12 11.5 18.5 5"/>
          <path d="M8 17.2c-.3-1.4.2-2.6 1.6-3.1"/>
          <path d="M10 14.8c-.2-1.4.4-2.6 1.8-3"/>
          <path d="M12 12.4c-.1-1.4.6-2.5 2-2.9"/>
          <path d="M14 10c0-1.4.7-2.5 2.1-2.8"/>
          <path d="M9.4 18.6c.5 1.3 1.7 1.9 3.1 1.6"/>
          <path d="M11.5 16.2c.5 1.3 1.7 1.9 3.1 1.7"/>
        </svg>
      ),
    },
    {
      n: "Founding Creator", s: "Waitlist & Invite",
      p: "Highest commission rate, direct line to the founding team, exclusive launch slots, permanent founding badge — and exclusive travel perks from our hotel and brand partners.",
      badges: "All Categories · Founding Cohort · Invitational",
      icon: (
        <svg {...iconProps}>
          {/* Heraldic coronet — three slim arches with small dots, low geometric crown */}
          <path d="M4 17h16"/>
          <path d="M4 19.5h16"/>
          <path d="M4 17V9.5"/>
          <path d="M20 17V9.5"/>
          <path d="M4 11c2 0 3.5-1 4-3 .5 2 2 3 4 3s3.5-1 4-3c.5 2 2 3 4 3"/>
          <circle cx="4" cy="9.5" r="0.7" fill="var(--c-gold-1)"/>
          <circle cx="12" cy="7.5" r="0.7" fill="var(--c-gold-1)"/>
          <circle cx="20" cy="9.5" r="0.7" fill="var(--c-gold-1)"/>
        </svg>
      ),
    },
  ];
  const metrics = [
    { v: "3–20%", l: "Commission on every booking your stories inspire — depending on your tier and the property's rate." },
    { v: "$15–120", l: "Earned per hotel booking, depending on tier and nightly rate." },
    { v: "Monthly", l: "Direct deposit. No minimums. No games." },
  ];
  const [form, setForm] = React.useState({
    name: "", email: "", ig: "", tt: "", followers: "", destinations: "", why: "",
  });
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState("");
  const upd = (k) => (e) => setForm({...form, [k]: e.target.value});
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setError("");
    try {
      const r = await fetch("/api/forms/creator", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          handle: form.ig,
          socials: { instagram: form.ig, tiktok: form.tt, followers: form.followers },
          niche: form.destinations,
          pitch: form.why,
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) {
        setError("Something went wrong. Please try again.");
        setSubmitting(false);
        return;
      }
      const firstName = data.firstName || (form.name || "").trim().split(/\s+/)[0] || "Friend";
      window.__thanks = { kind: "creator", firstName, email: form.email };
      window.__setRoute && window.__setRoute("thanks");
    } catch (err) {
      setError("Network error. Please try again.");
      setSubmitting(false);
    }
  };

  return (
    <main>
      <section className="page-hero creators" data-screen-label="Creators · Hero">
        <div className="grid-lines">
          <span style={{left:"25%"}}/><span style={{left:"50%"}}/><span style={{left:"75%"}}/>
        </div>
        <div className="page-hero-inner">
          <div>
            <div className="eyebrow reveal">For Creators</div>
            <h1 className="display reveal">Your travels inspire bookings. <em>Now they pay you.</em></h1>
          </div>
          <div className="reveal">
            <p className="lede">Every hotel you recommend, every itinerary you share — when someone books from your story, you earn commission. No brand deals required.</p>
            <a href="#apply" className="btn on-dark lg" onClick={(e)=>{e.preventDefault();document.querySelector("#apply")?.scrollIntoView({behavior:"smooth",block:"start"});}}>
              Apply as a Founding Creator <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Creators · Tiers">
        <div className="container">
          <div className="section-head reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Creator Tiers</div>
              <h2 className="h2">Four paths. <em>One commitment</em> to real stories.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">Progression through Trepic is based on contribution, not clout. Every tier earns commission. Every story is verifiable. Every badge is earned.</p>
            </div>
          </div>
          <div className="col-grid-4 reveal">
            {tiers.map((t) => (
              <div key={t.n} className="col-card">
                <div className="tier-icon">{t.icon}</div>
                <div className="tier-name">{t.n}</div>
                <div className="tier-sub">{t.s}</div>
                <p>{t.p}</p>
                <div className="tier-meta">Badges: {t.badges}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--c-warm)"}} data-screen-label="Creators · Earnings">
        <div className="container">
          <div className="section-head reveal" style={{marginBottom: 72}}>
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>How You Earn</div>
              <h2 className="h2">Paid for what you <em>already do</em>.</h2>
            </div>
            <div className="lead">
              <p className="body-lg">You share a recommendation. A traveler books. You earn. No ad reads. No hidden sponsorships. No brand-approved captions.</p>
            </div>
          </div>
          <div className="metric-row reveal">
            {metrics.map((m) => (
              <div key={m.v} className="metric">
                <div className="v">{m.v}</div>
                <div className="l">{m.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="apply" className="section" data-screen-label="Creators · Apply">
        <div className="container">
          <div style={{display:"grid",gridTemplateColumns:"1fr 1.4fr",gap:"80px",alignItems:"start"}} className="reveal">
            <div>
              <div className="eyebrow" style={{marginBottom: 20}}>Apply</div>
              <h2 className="h2" style={{marginBottom: 28}}>A members-only <em>creative collective</em>.</h2>
              <p className="body-lg" style={{maxWidth: 380}}>Applications are reviewed within 48 hours. Approved creators receive Founding status and the highest commission rates we'll ever offer.</p>
              <div style={{marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--c-line)"}}>
                <div className="eyebrow" style={{marginBottom: 16}}>What we look for</div>
                <ul style={{listStyle:"none",padding:0,margin:0,fontSize:14,lineHeight:1.8,color:"var(--c-mute-ink)"}}>
                  <li>— Real voice over reach</li>
                  <li>— A point of view that isn't for sale</li>
                  <li>— Respect for the places you travel</li>
                  <li>— A portfolio of work, not followers</li>
                </ul>
              </div>
            </div>
            {sent ? (
              <div className="success-block">
                <div className="eyebrow on-dark" style={{color:"rgba(255,255,255,0.7)"}}>Application Received</div>
                <div style={{fontFamily:"var(--ff-display)",fontSize:"clamp(28px,3vw,44px)",lineHeight:1.2,margin:"24px 0",fontStyle:"italic"}}>
                  Thank you, {form.name || "traveler"}.
                </div>
                <p style={{color:"rgba(255,255,255,0.7)",maxWidth:420,margin:"0 auto"}}>Our team reviews every application personally. You'll hear from us at {form.email || "your email"} within 48 hours.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="form-row">
                  <div className="field"><label>Name</label><input required value={form.name} onChange={upd("name")}/></div>
                  <div className="field"><label>Email</label><input required type="email" value={form.email} onChange={upd("email")}/></div>
                </div>
                <div className="form-row">
                  <div className="field"><label>Instagram Handle</label><input placeholder="@" value={form.ig} onChange={upd("ig")}/></div>
                  <div className="field"><label>TikTok Handle<span className="opt">optional</span></label><input placeholder="@" value={form.tt} onChange={upd("tt")}/></div>
                </div>
                <div className="field">
                  <label>Follower Count</label>
                  <select required value={form.followers} onChange={upd("followers")}>
                    <option value="">— Select —</option>
                    <option>Under 5K</option>
                    <option>5K–25K</option>
                    <option>25K–100K</option>
                    <option>100K–500K</option>
                    <option>500K+</option>
                  </select>
                </div>
                <div className="field">
                  <label>What destinations do you create about?</label>
                  <input placeholder="Italy, Morocco, Japan…" value={form.destinations} onChange={upd("destinations")}/>
                </div>
                <div className="field">
                  <label>Why Trepic?</label>
                  <textarea rows="4" value={form.why} onChange={upd("why")}/>
                </div>
                <button type="submit" disabled={submitting} className="btn lg" style={{marginTop: 16, opacity: submitting ? 0.6 : 1}}>
                  {submitting ? "Submitting…" : <>Apply Now <span className="arrow">→</span></>}
                </button>
                {error ? <p style={{color:"#b04040",fontSize:13,marginTop:12}}>{error}</p> : null}
                <p style={{fontSize: 12, color: "var(--c-mute)", marginTop: 20, lineHeight: 1.6, letterSpacing: "0.02em"}}>
                  Applications are reviewed within 48 hours. Approved creators receive Founding status and the highest commission rates.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { CreatorsPage });