// FeaturesPage — long scroll with alternating image positions.

function FeaturesPage({ setPage }) {
  const { colors, SectionLabel, CTABand } = window;

  const sections = [
  {
    label: "01",
    title: "Branching iteration",
    body: [
    "Pick any render in the tree, generate two more variations from it. Every path stays visible — abandoned branches dim, the active path stays bright.",
    "You never lose work to a bad prompt. Walk back, fork sideways, keep what works."],

    image: "assets/screenshot-branching.png",
    caption: "Sfuma · render tree with active branch"
  },
  {
    label: "02",
    title: "33 style presets across 6 groups",
    body: [
    "Visualization, conceptual, drawing, diagram, artistic, cinematic — each preset is a curated prompt + model recipe tuned for that look.",
    "Star your favorites. The rail remembers what you reach for most."],

    image: "assets/screenshot-style-presets.png",
    caption: "Six groups · 33 curated presets"
  },
  {
    label: "03",
    title: "Edit area",
    body: [
    "Paint a region. Type what should change. Generate up to 4 variations of just that region in seconds.",
    "Brush, eraser, rectangle, lasso, hardness slider. Shift to add, Alt to subtract. Real inpainting masks on OpenAI; magenta-composite fallback on the rest."],

    image: "assets/screenshot-edit-area.png",
    caption: "Sfuma · brush mask painted over the roof"
  },
  {
    label: "04",
    title: "13 AI models, automatic routing",
    body: [
    "OpenAI GPT Image 1, 1.5 and 2. Google Nano Banana, Nano Banana 2 and Nano Banana Pro. Black Forest Labs Flux 2 Klein 4B, Klein 9B, Flex, Pro and Max. ByteDance Seedream 4.0 and 4.5.",
    "Buy one API key and fall through to fal.ai for the rest. Or pay each provider direct. Your choice — Sfuma never proxies the call."],

    image: "assets/screenshot-models.png",
    caption: "Thirteen models. One key gets you all of them via fal.ai."
  },
  {
    label: "05",
    title: "SketchUp & 3ds Max plugins",
    body: [
    "A single toolbar button. One click, your viewport is in Sfuma — camera, materials, shadows preserved.",
    "Works with SketchUp 2021+ and 3ds Max 2024+. Rhino support coming soon."],

    image: "assets/screenshot-sketchup-plugin.png",
    caption: "Send to Sfuma · one button in the SketchUp toolbar"
  },
  {
    label: "06",
    title: "Local-first",
    body: [
    "Your project files live on your disk in a format you control. Your API keys live in your OS keychain.",
    "Your renders never touch our servers. We have nothing to leak."],

    image: "assets/screenshot-local-first.png",
    caption: "Privacy by default · nothing to leak"
  }];


  return (
    <div data-screen-label="Features">
      {/* Header */}
      <section style={{ padding: "160px 0 80px" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <SectionLabel className="mb-5">Features</SectionLabel>
          <h1
            style={{
              fontSize: "clamp(44px,6.5vw,84px)",
              fontWeight: 500,
              letterSpacing: "-0.04em",
              lineHeight: 1,
              color: colors.body,
              maxWidth: 980
            }}>
            
            Built for the way architects actually iterate.
          </h1>
          <p className="mt-8 text-[19px] max-w-[640px]" style={{ color: colors.muted, lineHeight: 1.55 }}>Six capabilities that collapse the gap between a model and a render you'd ship to a client.

          </p>
        </div>
      </section>

      {/* Sections */}
      <div>
        {sections.map((s, i) =>
        <FeatureBlock key={s.label} block={s} flip={i % 2 === 1} />
        )}
      </div>

      <CTABand setPage={setPage} />
    </div>);

}

function FeatureBlock({ block, flip }) {
  const { colors } = window;
  return (
    <section style={{ padding: "clamp(60px,9vw,120px) 0" }}>
      <div className="max-w-[1240px] mx-auto px-6 md:px-10">
        <div className={`grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16 items-center`}>
          <div className={`md:col-span-5 ${flip ? "md:order-2" : ""}`}>
            <div
              className="text-[13px] mb-5"
              style={{ color: colors.primary, fontWeight: 500, letterSpacing: "0.06em" }}>
              
              {block.label}
            </div>
            <h2
              style={{
                fontSize: "clamp(32px,3.8vw,48px)",
                fontWeight: 500,
                letterSpacing: "-0.03em",
                lineHeight: 1.05,
                color: colors.body
              }}>
              
              {block.title}
            </h2>
            <div className="mt-7 flex flex-col gap-4">
              {block.body.map((p, i) =>
              <p key={i} className="text-[16px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
                  {p}
                </p>
              )}
            </div>
          </div>

          <div className={`md:col-span-7 ${flip ? "md:order-1" : ""}`}>
            <div
              className="w-full overflow-hidden flex items-center justify-center"
              style={{
                aspectRatio: "16/10",
                background: "#1A1A1A",
                borderRadius: 10,
                border: `0.6px solid ${colors.hairline}`
              }}>
              
              {block.image ?
              <img src={block.image} alt={block.title} className="w-full h-full object-cover" draggable={false} /> :

              <div style={{ color: "rgba(255,255,255,0.35)", fontSize: 11, letterSpacing: "0.16em", fontWeight: 500 }}>
                  SCREENSHOT PLACEHOLDER
                </div>
              }
            </div>
            <div className="mt-3 text-[12px]" style={{ color: colors.muted }}>
              {block.caption}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.FeaturesPage = FeaturesPage;