// HomePage — hero with before/after, value strip, how it works, features, pricing teaser, CTA.

const { useState: useStateH } = React;

function HomePage({ setPage }) {
  const {
    IconArrowRight, IconNetwork, IconBrush, IconSparkles, IconCpu, IconBox, IconHardDrive
  } = window.Icons;
  const { PrimaryButton, TealLink, Eyebrow, SectionLabel, ScreenshotPlaceholder, CTABand, colors, appUrls } = window;
  const BeforeAfter = window.BeforeAfter;

  // Hero before/after pair set (user can swap by clicking the chips)
  const pairs = [
  { id: "residential", label: "Residential", input: "assets/residential-input.png", output: "assets/residential-output.png" },
  { id: "bedroom", label: "Interior", input: "assets/bedroom-input.png", output: "assets/bedroom-output.png" },
  { id: "airport", label: "Civic", input: "assets/airport-input.png", output: "assets/airport-output.png" }];

  const [pairIdx, setPairIdx] = useStateH(0);
  const active = pairs[pairIdx];

  return (
    <div data-screen-label="Home">
      {/* ===== HERO ===== */}
      <section
        className="relative w-full"
        style={{ paddingTop: 140, paddingBottom: 120 }}>
        
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="max-w-[920px] mx-auto text-center">
            <div className="mb-8 flex justify-center">
              <Eyebrow onClick={() => {
                const el = document.getElementById("home-cta");
                if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
              }}>
                Now available in India
              </Eyebrow>
            </div>

            <h1
              style={{
                fontSize: "clamp(44px,8vw,96px)",
                fontWeight: 500,
                letterSpacing: "-0.045em",
                lineHeight: 0.98,
                color: colors.body
              }}>
              
              From viewport to render<br />in one click.
            </h1>

            <p
              className="mx-auto mt-8"
              style={{
                maxWidth: 640,
                fontSize: "clamp(17px,1.6vw,20px)",
                lineHeight: 1.5,
                color: colors.muted
              }}>Stop waiting on renders. Sfuma turns your viewport into a photoreal AI image in seconds — then lets you iterate visually through a branching tree of variations.


            </p>

            <div className="mt-10 flex items-center justify-center gap-6 flex-wrap">
              <PrimaryButton size="lg" as="a" href={appUrls.signup} target="_blank" rel="noopener">
                Get started
              </PrimaryButton>
              <TealLink onClick={() => {
                const el = document.getElementById("how-it-works");
                if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
              }}>
                See how it works <IconArrowRight size={15} />
              </TealLink>
            </div>
          </div>

          {/* Before/After slider */}
          <div className="mt-20 relative">
            <BeforeAfter
              inputSrc={active.input}
              outputSrc={active.output}
              height={Math.min(680, Math.max(360, typeof window !== "undefined" ? window.innerWidth * 0.42 : 540))} />
            

            <div className="mt-6 flex items-center justify-between flex-wrap gap-4">
              <div className="flex items-center gap-2">
                {pairs.map((p, i) =>
                <button
                  key={p.id}
                  onClick={() => setPairIdx(i)}
                  className="text-[12.5px] transition-colors"
                  style={{
                    padding: "6px 14px",
                    borderRadius: 999,
                    background: i === pairIdx ? colors.body : "transparent",
                    color: i === pairIdx ? "#fff" : colors.muted,
                    border: i === pairIdx ? `0.6px solid ${colors.body}` : `0.6px solid ${colors.hairline}`,
                    fontWeight: 500
                  }}>
                  
                    {p.label}
                  </button>
                )}
              </div>
              <div className="text-[12px]" style={{ color: colors.muted }}>
                Drag the handle to compare. Mouse or touch.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Differentiator strip ===== */}
      <section
        className="w-full"
        style={{
          padding: "80px 0",
          borderTop: `0.6px solid ${colors.hairline}`,
          borderBottom: `0.6px solid ${colors.hairline}`,
          background: colors.surface
        }}>
        
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-0">
            {[
            { t: "Local-first", d: "Your renders never leave your machine." },
            { t: "BYOK", d: "Bring your own AI keys, pay what you actually use." },
            { t: "Branching iteration", d: "Explore variations without losing work." },
            { t: "13 AI models", d: "Choose the engine per render." }].
            map((s, i) =>
            <div
              key={s.t}
              className="px-0 md:px-8"
              style={{
                borderLeft: i === 0 ? "none" : `0.6px solid ${colors.hairline}`
              }}>
              
                <div className="text-[18px]" style={{ ...{ color: colors.body, fontWeight: 500, letterSpacing: "-0.01em" }, color: "rgb(29, 158, 117)" }}>
                  {s.t}
                </div>
                <div className="mt-2 text-[14px]" style={{ color: colors.muted, lineHeight: 1.5 }}>
                  {s.d}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ===== How it works ===== */}
      <section id="how-it-works" style={{ padding: "clamp(80px,12vw,160px) 0" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="max-w-[720px] mb-20">
            <SectionLabel className="mb-5">How it works</SectionLabel>
            <h2
              style={{
                fontSize: "clamp(36px,4.6vw,56px)",
                fontWeight: 500,
                letterSpacing: "-0.035em",
                lineHeight: 1.04,
                color: colors.body
              }}>Three steps from viewport to a keeper render.


            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-10">
            {[
            { n: "01", t: "Capture.", d: "One click in SketchUp sends your viewport to Sfuma.", img: "assets/residential-input.png" },
            { n: "02", t: "Generate.", d: "Pick a style preset (33 to choose from) or write your own prompt. Generate up to 4 variations at once.", img: "assets/residential-output.png" },
            { n: "03", t: "Iterate.", d: "Branch from any render. Tweak lighting, weather, materials. Build a tree of options until you're satisfied.", img: "assets/residential-iterate.jpeg" }].
            map((step) =>
            <div key={step.n} style={{ height: "450px" }}>
                <div
                className="text-[44px] mb-5"
                style={{ color: "#C8C8C5", fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1 }}>
                
                  {step.n}
                </div>
                <div className="text-[22px] mb-2.5" style={{ color: colors.body, fontWeight: 500, letterSpacing: "-0.015em" }}>
                  {step.t}
                </div>
                <p className="text-[14.5px] mb-6" style={{ color: colors.muted, lineHeight: 1.55, maxWidth: 320 }}>
                  {step.d}
                </p>
                <div
                style={{
                  height: 220,
                  borderRadius: 10,
                  overflow: "hidden",
                  border: `0.6px solid ${colors.hairline}`,
                  background: step.img ? "#0e0e0e" : "#1A1A1A"
                }}
                className="flex items-center justify-center">
                
                  {step.img ?
                <img src={step.img} alt={step.t} className="w-full h-full object-cover" draggable={false} style={{ width: "359px", objectFit: "cover", height: "219px" }} /> :

                <div style={{ color: "rgba(255,255,255,0.35)", fontSize: 11, letterSpacing: "0.16em", fontWeight: 500 }}>
                      SCREENSHOT PLACEHOLDER
                    </div>
                }
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ===== Key features ===== */}
      <section style={{ padding: "clamp(80px,10vw,140px) 0", background: colors.surface2, borderTop: `0.6px solid ${colors.hairline}`, borderBottom: `0.6px solid ${colors.hairline}` }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="max-w-[720px] mb-16">
            <SectionLabel className="mb-5">Features</SectionLabel>
            <h2
              style={{
                fontSize: "clamp(36px,4.6vw,56px)",
                fontWeight: 500,
                letterSpacing: "-0.035em",
                lineHeight: 1.04,
                color: colors.body
              }}>
              
              Everything you need to render, iterate, and ship.
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {[
            { I: IconNetwork, t: "Branching iteration tree", d: "Explore variations without losing your previous attempts." },
            { I: IconBrush, t: "Edit area", d: "Paint over part of a render and regenerate just that region." },
            { I: IconSparkles, t: "33 style presets", d: "Across 6 groups: visualization, conceptual, drawing, diagram, artistic, cinematic." },
            { I: IconCpu, t: "13 AI models", d: "OpenAI, Google Gemini, Flux 2, Seedream — with automatic fallback routing." },
            { I: IconBox, t: "Plugins built in", d: "One toolbar button in SketchUp or 3ds Max. Rhino coming soon." },
            { I: IconHardDrive, t: "Local project files", d: "Your work lives on your disk, never the cloud." }].
            map((f) =>
            <FeatureCard key={f.t} I={f.I} title={f.t} desc={f.d} />
            )}
          </div>
        </div>
      </section>

      {/* ===== Pricing teaser ===== */}
      <section style={{ padding: "clamp(80px,12vw,160px) 0" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="max-w-[720px] mb-16">
            <SectionLabel className="mb-5">Pricing</SectionLabel>
            <h2
              style={{
                fontSize: "clamp(36px,4.6vw,56px)",
                fontWeight: 500,
                letterSpacing: "-0.035em",
                lineHeight: 1.04,
                color: colors.body
              }}>₹399/month or ₹3999/year. You bring the AI keys.


            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-[840px]">
            <MiniPriceCard title="Monthly" price="₹399" period="/ month" />
            <MiniPriceCard title="Annual" price="₹3999" period="/ year" highlight badge="Save ₹789/year" />
          </div>

          <div className="mt-10 text-[14px]" style={{ color: colors.muted }}>
            Student? ₹199/month with valid enrolment proof —{" "}
            <TealLink onClick={() => setPage("pricing")}>
              see full pricing <IconArrowRight size={14} />
            </TealLink>
          </div>
        </div>
      </section>

      {/* ===== Final CTA ===== */}
      <div id="home-cta">
        <CTABand setPage={setPage} />
      </div>
    </div>);

}

function FeatureCard({ I, title, desc }) {
  const { colors } = window;
  return (
    <div
      className="p-7 transition-shadow duration-200"
      style={{
        background: "#fff",
        border: `0.6px solid ${colors.hairline}`,
        borderRadius: 10
      }}
      onMouseEnter={(e) => e.currentTarget.style.boxShadow = "0 6px 28px rgba(15,110,86,0.07)"}
      onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}>
      
      <div
        className="flex items-center justify-center mb-6"
        style={{
          width: 38, height: 38, borderRadius: 10,
          background: "rgba(29,158,117,0.08)",
          color: colors.primary
        }}>
        
        <I size={18} />
      </div>
      <div className="text-[17px]" style={{ color: colors.body, fontWeight: 500, letterSpacing: "-0.01em" }}>
        {title}
      </div>
      <p className="mt-2 text-[14px]" style={{ color: colors.muted, lineHeight: 1.55 }}>
        {desc}
      </p>
    </div>);

}

function MiniPriceCard({ title, price, period, highlight, badge }) {
  const { colors, PrimaryButton, Icons, appUrls } = window;
  const { IconCheck } = Icons;
  return (
    <div className="relative">
      {badge &&
      <div
        className="absolute -top-3 left-6 text-[11px] px-3 py-1"
        style={{
          background: colors.primary, color: "#fff",
          borderRadius: 999, fontWeight: 500, letterSpacing: "0.01em"
        }}>
        
          {badge}
        </div>
      }
      <div
        className="p-8"
        style={{
          background: "#fff",
          border: highlight ? `2px solid ${colors.primary}` : `0.6px solid ${colors.hairline}`,
          borderRadius: 10
        }}>
        
        <div className="text-[14px] mb-3" style={{ color: colors.muted, fontWeight: 500 }}>{title}</div>
        <div className="flex items-baseline gap-2 mb-6">
          <span style={{ fontSize: 56, fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 1, color: colors.body }}>{price}</span>
          <span className="text-[15px]" style={{ color: colors.muted }}>{period}</span>
        </div>
        <ul className="flex flex-col gap-2.5 mb-8">
          {["All Sfuma features", "Unlimited renders (BYOK)", "Windows app + SketchUp & 3ds Max plugins"].map((x) =>
          <li key={x} className="flex items-center gap-2.5 text-[13.5px]" style={{ color: colors.body }}>
              <IconCheck size={14} style={{ color: colors.primary }} /> {x}
            </li>
          )}
        </ul>
        <PrimaryButton as="a" href={appUrls.signup} target="_blank" rel="noopener" className="w-full">Get started</PrimaryButton>
      </div>
    </div>);

}

window.HomePage = HomePage;