/* Takotasks — Home page */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "dark",
  "reveal": true,
  "halo": true,
  "showStats": true,
  "showMarquee": true,
  "accentColor": "#C41E4A"
} /*EDITMODE-END*/;

function Home() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply the chosen accent color to the page
  React.useEffect(() => {
    document.documentElement.style.setProperty("--tt-primary", t.accentColor);
    return () => document.documentElement.style.removeProperty("--tt-primary");
  }, [t.accentColor]);

  return (
    <PageFade>
      {t.halo && <CursorHalo />}
      <TopNav current="home" dark={t.heroVariant === "dark"} />

      {t.heroVariant === "dark" && <HeroDark t={t} />}
      {t.heroVariant === "light" && <HeroLight t={t} />}
      {t.heroVariant === "split" && <HeroSplit t={t} />}

      {t.showMarquee &&
      <section style={{
        background: t.heroVariant === "dark" ? "var(--tt-surface-dark)" : "var(--tt-canvas)",
        color: t.heroVariant === "dark" ? "var(--tt-on-dark)" : "var(--tt-ink)",
        padding: "40px 0 64px",
        borderBottom: t.heroVariant === "dark" ? "1px solid rgba(255,255,255,0.05)" : "1px solid var(--tt-hairline)"
      }}>
          <Marquee items={[
        "Customer support", "Data labeling", "Content moderation",
        "Video editing", "Brand design", "Operations",
        "Community", "Human-in-the-loop", "Executive assistance"]
        } />
        </section>
      }

      {t.showStats && <StatsBand dark={false} />}

      <TrustStripUpgraded />
      <HowItWorksPreview />
      <ProjectsPreview />
      <FAQ items={FAQS} />
      <ClosingCallout />
      <Footer />

      <TweaksUI t={t} setTweak={setTweak} />
    </PageFade>);

}

/* ---------- HERO VARIANTS ---------- */

function HeroDark({ t }) {
  return (
    <section className="tt-hero tt-hero--dark">
      <div className="tt-orb tt-orb--a" />
      <div className="tt-orb tt-orb--b" />
      <div className="tt-container">
        <div className="tt-hero__solo">
          <Reveal delay={80}>
            <h1 className="tt-hero-display">
              Real work,<br />
              found for you,<br />
              <em>no chasing.</em>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="tt-lead" style={{ maxWidth: "54ch", fontSize: 19 }}>
              Takotasks places pre-vetted remote workers — support, data, ops, creative — in roles
              with startups and SMBs worldwide. You apply once; we reach out when a role matches
              your skills. No platforms, no pitching, no chasing.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="tt-hero__cta-row">
              <Button variant="on-gradient" href="active-projects.html">
                See open roles <Icon name="arrow-right" size={18} />
              </Button>
              <Button variant="on-dark" href="https://airtable.com/app26Sr4fDUy7hBiF/pagmofM0JSTi8kZOl/form" target="_blank" rel="noopener noreferrer">
                Join our database <Icon name="arrow-right" size={18} />
              </Button>
            </div>
          </Reveal>

          <Reveal delay={300}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: 64, flexWrap: "wrap", gap: 24 }}>
              <div className="tt-geo-row">
                <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Philippines</span>
                <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Kenya</span>
                <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Ecuador</span>
                <span style={{ color: "var(--tt-on-dark-soft)", fontSize: 13 }}>· more coming</span>
              </div>
              <span className="tt-scroll-hint">
                Scroll <Icon name="arrow-down" size={14} />
              </span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

function HeroLight({ t }) {
  return (
    <section className="tt-hero tt-hero--light">
      <div className="tt-container">
        <div className="tt-hero__solo">
          <Reveal><Eyebrow>Now placing · Philippines · Kenya · Ecuador</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h1 className="tt-hero-display">
              Real work,<br />
              found for you,<br />
              <em>no chasing.</em>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="tt-lead" style={{ maxWidth: "54ch", fontSize: 19 }}>
              Takotasks places pre-vetted remote workers — support, data, ops, creative — in roles
              with startups and SMBs worldwide. You apply once; we reach out when a role matches
              your skills. No platforms, no pitching, no chasing.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <div className="tt-hero__cta-row">
              <Button variant="primary" href="active-projects.html">
                See open roles <Icon name="arrow-right" size={18} />
              </Button>
              <Button variant="secondary" href="https://airtable.com/app26Sr4fDUy7hBiF/pagmofM0JSTi8kZOl/form" target="_blank" rel="noopener noreferrer">
                Join our database <Icon name="arrow-right" size={18} />
              </Button>
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div className="tt-geo-row" style={{ marginTop: 56 }}>
              <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Philippines</span>
              <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Kenya</span>
              <span className="tt-geo-chip"><span className="tt-geo-chip__dot" />Ecuador</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

function HeroSplit({ t }) {
  return (
    <section className="tt-hero" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="tt-container">
        <div className="tt-hero__grid">
          <div className="tt-hero__copy">
            <Reveal><Eyebrow>Real remote work, found for you</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h1>Real work, found for you, <em style={{ fontFamily: "var(--tt-font-body)", fontWeight: 500, fontStyle: "italic", color: "var(--tt-primary)" }}>no chasing.</em></h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="tt-lead">
                Pre-vetted remote workers from the Philippines, Kenya and Ecuador.
                You apply once — we reach out when a role matches your skills.
                No platforms, no pitching, no chasing.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div className="tt-hero__cta-row">
                <Button variant="primary" href="active-projects.html">
                  See open roles <Icon name="arrow-right" size={18} />
                </Button>
                <Button variant="text" href="https://airtable.com/app26Sr4fDUy7hBiF/pagmofM0JSTi8kZOl/form" target="_blank" rel="noopener noreferrer">
                  Join our database →
                </Button>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <div className="tt-hero__artifact" aria-hidden="true">
              <div style={{
                position: "absolute", inset: 0,
                display: "flex", flexDirection: "column",
                justifyContent: "flex-end", alignItems: "flex-start",
                padding: 36,
                color: "var(--tt-on-primary)"
              }}>
                <span style={{
                  fontSize: 12, letterSpacing: 1.2, textTransform: "uppercase",
                  fontWeight: 600, opacity: 0.85
                }}>Now placing</span>
                <div style={{
                  fontFamily: "var(--tt-font-display)",
                  fontWeight: 500, fontSize: 44, lineHeight: 1.05,
                  letterSpacing: -1, marginTop: 8
                }}>
                  1 open<br />role
                </div>
                <span style={{ opacity: 0.85, marginTop: 8, fontSize: 14 }}>
                  200+ taskers placed worldwide
                </span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

/* ---------- STATS BAND ---------- */
function StatsBand({ dark }) {
  const stats = [
    { n: "200+",     l: "Taskers placed in real remote roles worldwide" },
    { n: "97%",      l: "Of taskers placed are still in role after 6 months" },
    { n: "1",        l: "Active role right now · all taskers pre-vetted" },
  ];
  return (
    <section className={cx("tt-band", dark && "tt-band--dark")} style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="tt-container">
        <div className="tt-stats">
          {stats.map((s, i) =>
          <Reveal key={i} delay={i * 80}>
              <div>
                <div className="tt-stat__num">{s.n}</div>
                <div className="tt-stat__label">{s.l}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- TRUST STRIP ---------- */
function TrustStripUpgraded() {
  const items = [
    {
      icon: "check-circle",
      title: "Pre-vetted, end to end",
      desc: "Work history, a lengthy assessment for skills and cultural fit, an English-level certification, and live interviews. Not a checkbox — a real read.",
    },
    {
      icon: "sparkles",
      iconColor: "var(--tt-grad-aqua)",
      title: "Matched to the role, not just the keywords",
      desc: "We build a custom assessment for each opening, so you're matched on skills AND context — the team's pace, communication style, and how they actually work day to day.",
    },
    {
      icon: "users",
      iconColor: "var(--tt-grad-pine)",
      title: "A small pool, on purpose",
      desc: "In remote work, cultural fit matters as much as the CV. We keep the database small so we know our people, and we stay close after the placement.",
    },
  ];

  return (
    <section className="tt-band tt-band--sky">
      <div className="tt-container">
        <div className="tt-section-head">
          <Reveal><Eyebrow>What we actually check</Eyebrow></Reveal>
          <Reveal delay={80}><h2>The boring parts, handled properly.</h2></Reveal>
          <Reveal delay={140}>
            <p>
              Remote work has a sketchiness problem — phantom companies, missed
              paydays, vague vetting. Here's how Takotasks is different, in plain
              language.
            </p>
          </Reveal>
        </div>
        <div className="tt-trust">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i * 100}>
              <div className="tt-trust__item">
                <span className="tt-trust__icon" style={it.iconColor ? { color: it.iconColor } : {}}><Icon name={it.icon} size={20} /></span>
                <h4>{it.title}</h4>
                <p>{it.desc}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- HOW IT WORKS PREVIEW ---------- */
function HowItWorksPreview() {
  const steps = [
    { n: "01", title: "Apply for our database", desc: "Tell us about your work, but also your values and the kind of opportunities you actually want. It helps us recommend better fits." },
    { n: "02", title: "We vet, then keep in touch", desc: "Once you're in our database, we reach out first when an opening matches your skills — you don't have to chase work." },
    { n: "03", title: "Start with a clear scope",   desc: "Hours, role and reporting written down on day one. No vague Slack-DM expectations." },
    { n: "04", title: "And we stay around",         desc: "Most clients hire you directly; when we run payroll it's via Thera or Wise. Either way, you stay in our database — we're here to help." },
  ];
  return (
    <section className="tt-band" id="how">
      <div className="tt-container">
        <div className="tt-section-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "none", marginBottom: 56 }}>
          <div style={{ maxWidth: 580 }}>
            <Reveal><Eyebrow>How it works</Eyebrow></Reveal>
            <Reveal delay={80}><h2 style={{ marginTop: 12 }}>What happens after you apply.</h2></Reveal>
          </div>
          <Reveal delay={140}>
            <a href="https://airtable.com/app26Sr4fDUy7hBiF/pagmofM0JSTi8kZOl/form" target="_blank" rel="noopener noreferrer" className="tt-arrow-link">
              Join our database
              <span className="tt-arrow-link__bullet"><Icon name="arrow-right" size={16} /></span>
            </a>
          </Reveal>
        </div>
        <div className="tt-steps">
          {steps.map((s, i) =>
          <Reveal key={s.n} delay={i * 100} y={30}>
              <div className="tt-step">
                <div className="tt-step__num">{s.n}</div>
                <div className="tt-step__title">{s.title}</div>
                <div className="tt-step__desc">{s.desc}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- ACTIVE PROJECTS PREVIEW (grid of 3) ---------- */
function ProjectsPreview() {
  const featured = ROLES.slice(0, 3);
  return (
    <section className="tt-band tt-band--dark" id="projects">
      <div className="tt-container">
        <div className="tt-section-head" style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "none", marginBottom: 56 }}>
          <div style={{ maxWidth: 580 }}>
            <Reveal><Eyebrow light>Open roles · 1 live</Eyebrow></Reveal>
            <Reveal delay={80}><h2 style={{ marginTop: 12 }}>Active projects we're hiring for.</h2></Reveal>
          </div>
          <Reveal delay={140}>
            <a href="active-projects.html" className="tt-arrow-link" style={{ color: "var(--tt-on-dark)" }}>
              See the full board
              <span className="tt-arrow-link__bullet"><Icon name="arrow-right" size={16} /></span>
            </a>
          </Reveal>
        </div>

        <div className="tt-projects-grid">
          {featured.map((r, i) =>
          <Reveal key={r.id} delay={i * 100} y={30}>
              <a href={`active-projects.html#${r.id}`} className="tt-project" style={{ textDecoration: "none", borderBottom: "none", display: "flex" }}>
                <span className="tt-project__chev" aria-hidden="true"><Icon name="arrow-right" size={16} /></span>
                <div className="tt-project__head">
                  {r.status === "open" && <Badge variant="status" dot="#7FC970">Open</Badge>}
                  {r.status === "filling" && <Badge variant="status" dot="#DA4331">Filling soon</Badge>}
                  <span style={{ fontSize: 12, color: "var(--tt-on-dark-soft)" }}>{r.type}</span>
                </div>
                <div className="tt-project__role">{r.role}</div>
                <div className="tt-project__desc">{r.team}</div>
                <div className="tt-project__meta">
                  <span>{r.location}</span>
                  <span>{r.region}</span>
                  <span>{r.hours}</span>
                </div>
              </a>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CLOSING CALLOUT ---------- */
function ClosingCallout() {
  return (
    <section className="tt-band tt-band--soft" style={{ paddingTop: 0 }}>
      <div className="tt-container">
        <Reveal>
          <div className="tt-callout tt-callout--gradient">
            <div>
              <Eyebrow style={{ color: "var(--tt-on-primary)" }}>Apply today</Eyebrow>
              <h2 style={{ marginTop: 12 }}>Find work that's actually real.</h2>
              <p>Pre-vetted teams. Paid on schedule. A real person on the other end of every email.</p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <Button variant="on-gradient" href="active-projects.html">
                See open roles <Icon name="arrow-right" size={18} />
              </Button>

            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- TWEAKS UI ---------- */
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero variation">
        <TweakSelect
          label="Layout"
          value={t.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
          { value: "dark", label: "Dark editorial (big display)" },
          { value: "light", label: "Light editorial (big display)" },
          { value: "split", label: "Split — copy + gradient artifact" }]
          } />
        
      </TweakSection>

      <TweakSection label="Accent">
        <TweakColor
          label="Primary"
          value={t.accentColor}
          onChange={(v) => setTweak("accentColor", v)}
          options={["#C41E4A", "#73092F", "#DA4331", "#ED468A", "#0E796A"]} />
        
      </TweakSection>

      <TweakSection label="Layout toggles">
        <TweakToggle label="Show stats band" value={t.showStats} onChange={(v) => setTweak("showStats", v)} />
        <TweakToggle label="Show marquee" value={t.showMarquee} onChange={(v) => setTweak("showMarquee", v)} />
        <TweakToggle label="Cursor halo" value={t.halo} onChange={(v) => setTweak("halo", v)} />
      </TweakSection>
    </TweaksPanel>);

}

window.Home = Home;