// Resminos — For Creators page

const CR_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "display": "grotesque",
  "accent": "#7C3AED",
  "glass": 2,
  "background": "gradient"
}/*EDITMODE-END*/;

function CrApp() {
  const [lang, setLang, t] = useLang();
  const [tw, setTweak] = useTweaks(CR_DEFAULTS);
  React.useEffect(() => { applyTheme({ ...tw, heroLayout: "centered", headline: "a" }); }, [tw]);

  return (
    <>
      <BackgroundLayer kind={tw.background} />
      <Nav lang={lang} setLang={setLang} t={t} page="creators" />

      <CrHero t={t} lang={lang} />
      <CrWhy t={t} />
      <CrWhatWeBuild t={t} />
      <CrWho t={t} />
      <CrPricing t={t} />
      <ContactBlock t={t} />
      <Footer t={t} />

      <StickyContact lang={lang} t={t} />

      <TweaksPanel title="Creators · Tweaks">
        <TweakSection label="Typography">
          <TweakRadio label="Headline font" value={tw.display}
                      options={[{value:"grotesque",label:"Grotesque"},{value:"serif",label:"Serif"}]}
                      onChange={(v) => setTweak("display", v)} />
        </TweakSection>
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={tw.theme} options={["light","dark"]}
                      onChange={(v) => setTweak("theme", v)} />
          <TweakColor label="Accent" value={tw.accent}
                      options={["#7C3AED","#2A5BFF","#FF6B35","#10B981","#111111"]}
                      onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Atmosphere">
          <TweakSlider label="Glass intensity" value={tw.glass} min={1} max={3} step={1}
                       onChange={(v) => setTweak("glass", v)} />
          <TweakRadio label="Background" value={tw.background}
                      options={[
                        {value:"orb",label:"Orb"},
                        {value:"grid",label:"Grid"},
                        {value:"gradient",label:"Gradient"},
                        {value:"noise",label:"Noise"},
                      ]}
                      onChange={(v) => setTweak("background", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function CrHero({ t, lang }) {
  return (
    <section className="hero creators-hero">
      <div className="container">
        <div className="hero-centered hero-enter">
          <span className="creators-tag"><I.spark /> {t.cr.eyebrow}</span>
          <h1 className="h1">
            {t.cr.headline[0]}<em>{t.cr.headline[1]}</em>{t.cr.headline[2]}
          </h1>
          <p className="lead">{t.cr.lead}</p>
          <div className="cta-row">
            <a className="btn-glow" href={SITE.calendly} target="_blank" rel="noreferrer">
              <I.zap /> <span>{t.cr.cta_primary}</span>
            </a>
            <a className="btn btn-ghost" href="#cr-build">
              {t.cr.cta_secondary} <I.arrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CrWhy({ t }) {
  const icons = [
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 2v16M14 5H7.5a2.5 2.5 0 0 0 0 5h5a2.5 2.5 0 0 1 0 5H6"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2 18c1.4-3 4.6-5 8-5s6.6 2 8 5"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M3 10h14M10 3v14"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 10 10 3l7 7M5 10v7h10v-7"/></svg>,
  ];
  return (
    <section className="section" id="cr-why" style={{paddingTop:40}}>
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.cr.why_kicker}</span>
          <h2 className="h2">{t.cr.why_title}</h2>
        </div></Reveal>
        <Reveal stagger><div className="creator-perks">
          {t.cr.perks.map((p, i) => (
            <div key={i} className="creator-perk glass">
              <div className="icon">{icons[i]}</div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

function CrWhatWeBuild({ t }) {
  return (
    <section className="section" id="cr-build">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.cr.build_kicker}</span>
          <h2 className="h2">{t.cr.build_title}</h2>
          <p className="lead">{t.cr.build_lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="build-grid">
          {t.cr.build_items.map((b, i) => (
            <div key={i} className="build-card glass">
              <span className="num">{String(i+1).padStart(2,"0")}</span>
              <h4>{b.t}</h4>
              <p>{b.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

function CrWho({ t }) {
  return (
    <section className="section" id="cr-who" style={{paddingTop:40, paddingBottom:40}}>
      <div className="container">
        <div className="glass" style={{borderRadius:28, padding:"40px 36px", textAlign:"center", display:"flex", flexDirection:"column", alignItems:"center", gap:14}}>
          <span className="kicker">{t.cr.who_kicker}</span>
          <h3 className="h3" style={{fontSize:"clamp(26px,3vw,38px)", margin:0}}>{t.cr.who_title}</h3>
          <p className="lead" style={{margin:0, textAlign:"center"}}>{t.cr.who_lead}</p>
        </div>
      </div>
    </section>
  );
}

function CrPricing({ t }) {
  return (
    <section className="section" id="cr-pricing">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.cr.pricing_kicker}</span>
          <h2 className="h2">{t.cr.pricing_title}</h2>
          <p className="lead">{t.cr.pricing_lead}</p>
        </div></Reveal>

        <Reveal stagger><div className="cr-pricing-grid">
          {t.cr.tiers.map((tier, i) => (
            <div key={i} className={`cr-tier glass ${tier.featured ? "featured" : ""}`}>
              {tier.featured && <span className="badge-best">★ Recommended</span>}
              <span className="tag">{tier.tag}</span>
              <div className="price">
                <span className={`amount ${/[a-zA-Z\u00C0-\u017F]/.test(tier.amount) ? "amount--text" : ""}`}>{tier.amount}</span>
                {tier.unit && <span className="unit">{tier.unit}</span>}
              </div>
              {tier.note && <p className="price-note">{tier.note}</p>}
              <ul>
                {tier.features.map((f, j) => (
                  <li key={j}><I.check /><span>{f}</span></li>
                ))}
              </ul>
              <a href={SITE.calendly} target="_blank" rel="noreferrer" className="tier-cta">
                <I.zap /> <span>{tier.cta}</span>
              </a>
            </div>
          ))}
        </div></Reveal>

        <div className="cr-includes glass">
          <h4>{t.cr.includes_title}</h4>
          <ul>
            {t.cr.includes.map((f, i) => (
              <li key={i}><I.check /><span>{f}</span></li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CrApp />);