const { useState, useEffect, useRef } = React;

// ─── Tweaks ────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "serif": "Cormorant Garamond",
  "accent": "#1F2A44",
  "density": "comfortable",
  "showGrid": false
}/*EDITMODE-END*/;

// ─── Tiny SVG primitives (abstract scan-field motifs) ─────────────
const ScanField = ({ className = "", stroke = "#1C1C1A" }) => (
  <svg viewBox="0 0 600 600" className={className} aria-hidden="true">
    <defs>
      <radialGradient id="rf-fade" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor={stroke} stopOpacity="0.55" />
        <stop offset="60%" stopColor={stroke} stopOpacity="0.18" />
        <stop offset="100%" stopColor={stroke} stopOpacity="0" />
      </radialGradient>
    </defs>
    {/* concentric arcs */}
    {Array.from({ length: 14 }).map((_, i) => (
      <circle key={i} cx="300" cy="300" r={20 + i * 20}
        fill="none" stroke="url(#rf-fade)" strokeWidth="0.6" />
    ))}
    {/* crosshair ticks */}
    <line x1="300" y1="20" x2="300" y2="60" stroke={stroke} strokeOpacity="0.35" strokeWidth="0.8" />
    <line x1="300" y1="540" x2="300" y2="580" stroke={stroke} strokeOpacity="0.35" strokeWidth="0.8" />
    <line x1="20" y1="300" x2="60" y2="300" stroke={stroke} strokeOpacity="0.35" strokeWidth="0.8" />
    <line x1="540" y1="300" x2="580" y2="300" stroke={stroke} strokeOpacity="0.35" strokeWidth="0.8" />
    {/* coordinate marker */}
    <circle cx="300" cy="300" r="2" fill={stroke} />
  </svg>
);

const Lattice = ({ className = "", stroke = "#1C1C1A" }) => (
  <svg viewBox="0 0 800 600" className={className} aria-hidden="true">
    <defs>
      <linearGradient id="lt-fade" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={stroke} stopOpacity="0" />
        <stop offset="40%" stopColor={stroke} stopOpacity="0.18" />
        <stop offset="100%" stopColor={stroke} stopOpacity="0.32" />
      </linearGradient>
    </defs>
    {/* horizontal slice planes */}
    {Array.from({ length: 24 }).map((_, i) => {
      const y = 40 + i * 22;
      const inset = Math.abs(i - 11) * 6;
      return (
        <line key={i} x1={40 + inset} y1={y} x2={760 - inset} y2={y}
          stroke="url(#lt-fade)" strokeWidth="0.8" />
      );
    })}
    {/* vertical center line */}
    <line x1="400" y1="40" x2="400" y2="572" stroke={stroke} strokeOpacity="0.22" strokeWidth="0.6" strokeDasharray="2 4" />
  </svg>
);

const ArcPanel = ({ className = "", stroke = "#1C1C1A" }) => (
  <svg viewBox="0 0 400 400" className={className} aria-hidden="true">
    {Array.from({ length: 22 }).map((_, i) => (
      <path key={i}
        d={`M 40 ${380 - i * 8} Q 200 ${380 - i * 8 - 60} 360 ${380 - i * 8}`}
        fill="none" stroke={stroke}
        strokeOpacity={0.06 + (i / 22) * 0.18}
        strokeWidth="0.7" />
    ))}
  </svg>
);

const Crosshair = ({ size = 14, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" aria-hidden="true">
    <line x1="7" y1="0" x2="7" y2="14" stroke={color} strokeWidth="0.8" />
    <line x1="0" y1="7" x2="14" y2="7" stroke={color} strokeWidth="0.8" />
    <circle cx="7" cy="7" r="2.5" fill="none" stroke={color} strokeWidth="0.8" />
  </svg>
);

// ─── Wordmark ──────────────────────────────────────────────────────
const Wordmark = ({ size = 22, color = "#1C1C1A", bracket = true }) => (
  <span style={{
    fontFamily: "Inter, sans-serif",
    fontWeight: 500,
    fontSize: size,
    letterSpacing: "-0.02em",
    color,
    display: "inline-flex",
    alignItems: "center",
    gap: size * 0.32,
    fontFeatureSettings: '"ss01"',
  }}>
    {bracket && <span style={{ opacity: 0.45, fontWeight: 300 }}>[</span>}
    <span>radiolo</span>
    {bracket && <span style={{ opacity: 0.45, fontWeight: 300 }}>]</span>}
  </span>
);

// ─── Nav ───────────────────────────────────────────────────────────
const Nav = ({ scrolled }) => {
  const links = [
    ["Scans", "scans"],
    ["How it works", "how"],
    ["Trust", "trust"],
    ["FAQ", "faq"],
  ];
  const onClick = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
  };
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(247,246,243,0.85)" : "transparent",
      backdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
      borderBottom: scrolled ? "1px solid #E3E1DC" : "1px solid transparent",
      transition: "all 240ms ease",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "18px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <a href="#top" onClick={onClick("top")} style={{ textDecoration: "none" }}>
          <Wordmark size={20} />
        </a>
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          {links.map(([label, id]) => (
            <a key={id} href={`#${id}`} onClick={onClick(id)}
              style={{
                fontFamily: "Inter, sans-serif", fontSize: 13.5,
                color: "#1C1C1A", textDecoration: "none", letterSpacing: "-0.005em",
                opacity: 0.78,
              }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
              onMouseLeave={(e) => e.currentTarget.style.opacity = 0.78}
            >{label}</a>
          ))}
          <a href="#scans" onClick={onClick("scans")} style={{
            fontFamily: "Inter, sans-serif", fontSize: 13.5,
            background: "var(--accent)", color: "#F7F6F3",
            padding: "9px 16px", borderRadius: 2, textDecoration: "none",
            letterSpacing: "-0.005em", fontWeight: 500,
            transition: "background 180ms ease",
          }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = "0.92"}
            onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}
          >View scans →</a>
        </div>
      </div>
    </nav>
  );
};

// ─── Section label ─────────────────────────────────────────────────
const SectionLabel = ({ num, children, style }) => (
  <div style={{
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
    color: "#5C5C58", display: "flex", alignItems: "center", gap: 14,
    ...style,
  }}>
    <Crosshair size={11} color="#5C5C58" />
    <span style={{ color: "#1C1C1A", fontWeight: 500 }}>§ {num}</span>
    <span style={{ width: 24, height: 1, background: "#E3E1DC" }} />
    <span>{children}</span>
  </div>
);

// ─── HERO ──────────────────────────────────────────────────────────
const Hero = () => (
  <section id="top" data-screen-label="01 Hero" style={{
    position: "relative", paddingTop: "var(--pad-top)", paddingBottom: 120,
    minHeight: "92vh", display: "flex", alignItems: "center",
    overflow: "hidden",
  }}>
    {/* background scan field, right side */}
    <ScanField className="hero-bg-scan" stroke="#1C1C1A" />

    <div style={{
      maxWidth: 1320, margin: "0 auto", padding: "0 40px", width: "100%",
      position: "relative", zIndex: 1,
    }}>
      <SectionLabel num="00" style={{ marginBottom: 56 }}>
        Imaging infrastructure · Est. 2025
      </SectionLabel>

      <h1 className="hero-h1">
        Almost every<br />
        patient story<br />
        starts with <em style={{ fontStyle: "italic", color: "var(--accent)" }}>an image.</em>
      </h1>

      <p style={{
        fontFamily: "Inter, sans-serif",
        fontSize: 19, lineHeight: 1.55, color: "#5C5C58",
        maxWidth: 540, marginTop: 40, letterSpacing: "-0.005em",
        textWrap: "pretty",
      }}>
        Radiolo unlocks fast, cash-pay access to medical imaging —
        no insurance required, no authorization delays, no surprise bills.
      </p>

      <div style={{ display: "flex", gap: 14, marginTop: 48, flexWrap: "wrap" }}>
        <CTA primary>View available scans</CTA>
        <CTA>How it works</CTA>
      </div>

      {/* meta strip */}
      <div className="hero-meta">
        {[
          ["24–48h", "Read turnaround"],
          ["No insurance", "Cash-pay, transparent"],
          ["Off-peak", "Evenings & weekends"],
          ["Board-certified", "Radiologist reads"],
        ].map(([k, v]) => (
          <div key={k}>
            <div style={{
              fontFamily: "var(--serif)", fontSize: 26,
              color: "#1C1C1A", letterSpacing: "-0.015em", fontWeight: 500,
            }}>{k}</div>
            <div style={{
              fontFamily: "Inter, sans-serif", fontSize: 12.5,
              color: "#5C5C58", marginTop: 6, letterSpacing: "0.01em",
            }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const CTA = ({ children, primary, onClick }) => {
  const [hover, setHover] = useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: "Inter, sans-serif", fontSize: 14.5, fontWeight: 500,
        padding: "14px 22px", border: primary ? "none" : "1px solid #1C1C1A",
        background: primary ? "var(--accent)" : "transparent",
        color: primary ? "#F7F6F3" : "#1C1C1A",
        cursor: "pointer", letterSpacing: "-0.005em",
        borderRadius: 2,
        transition: "all 220ms ease",
        transform: hover ? "translateY(-1px)" : "translateY(0)",
        boxShadow: hover && primary ? "0 8px 24px -10px rgba(31,42,68,0.4)" : "none",
        opacity: hover && !primary ? 0.7 : 1,
        display: "inline-flex", alignItems: "center", gap: 10,
      }}>
      {children}
      <span style={{
        display: "inline-block",
        transform: hover ? "translateX(3px)" : "translateX(0)",
        transition: "transform 220ms ease",
      }}>→</span>
    </button>
  );
};

// ─── PROBLEM ───────────────────────────────────────────────────────
const Problem = () => (
  <section id="problem" data-screen-label="02 Problem" style={{
    padding: "var(--pad-section) 0",
    borderTop: "1px solid #E3E1DC",
  }}>
    <div style={{
      maxWidth: 1320, margin: "0 auto", padding: "0 40px",
      display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80,
      alignItems: "start",
    }} className="problem-grid">
      <div>
        <SectionLabel num="01">The problem</SectionLabel>
        <h2 className="section-h2" style={{ marginTop: 32 }}>
          Imaging shouldn't<br />take weeks.
        </h2>
      </div>
      <div style={{ paddingTop: 12 }}>
        <p style={{
          fontFamily: "var(--serif)", fontSize: 26, lineHeight: 1.42,
          color: "#1C1C1A", letterSpacing: "-0.01em", fontWeight: 400,
          textWrap: "pretty",
        }}>
          Modern medicine depends on imaging to diagnose injuries,
          neurological symptoms, and spine conditions. Yet patients
          routinely face <em style={{ color: "var(--accent)" }}>insurance authorization delays</em>,
          unpredictable pricing, and long scheduling timelines.
        </p>
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.6,
          color: "#5C5C58", marginTop: 28, maxWidth: 560,
        }}>
          Radiolo exists to remove that friction — by routing patients
          to the unused capacity already sitting in imaging centers nationwide.
        </p>

        {/* friction comparison */}
        <div className="friction-grid">
          <div className="friction-cell">
            <div className="friction-label">Conventional path</div>
            <ul className="friction-list">
              <li>Referral → wait</li>
              <li>Insurance auth → wait</li>
              <li>Scheduling → wait</li>
              <li>Surprise billing</li>
            </ul>
            <div className="friction-meta">≈ 14–28 days</div>
          </div>
          <div className="friction-cell friction-cell--accent">
            <div className="friction-label">Radiolo</div>
            <ul className="friction-list">
              <li>Choose scan</li>
              <li>Book off-peak slot</li>
              <li>Scan + read</li>
              <li>Fixed price</li>
            </ul>
            <div className="friction-meta">≈ 2–5 days</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─── VALUE PROPS ───────────────────────────────────────────────────
const Values = () => {
  const cards = [
    {
      n: "01",
      title: "Transparent Pricing",
      body: "Fixed, upfront pricing. No surprise bills. No insurance paperwork.",
      tag: "Cash-pay",
    },
    {
      n: "02",
      title: "Off-Peak Access",
      body: "Radiolo unlocks unused imaging capacity during evenings and weekends.",
      tag: "Capacity",
    },
    {
      n: "03",
      title: "Board-Certified Reads",
      body: "Every scan includes a professional radiology interpretation delivered within 24–48 hours.",
      tag: "Quality",
    },
  ];
  return (
    <section data-screen-label="03 Values" style={{
      padding: "var(--pad-section) 0", borderTop: "1px solid #E3E1DC",
      background: "#FBFAF7",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 40px" }}>
        <SectionLabel num="02">What Radiolo does</SectionLabel>
        <h2 className="section-h2" style={{ marginTop: 32, maxWidth: 880 }}>
          A premium infrastructure layer<br />for medical imaging.
        </h2>

        <div className="values-grid">
          {cards.map((c) => <ValueCard key={c.n} {...c} />)}
        </div>
      </div>
    </section>
  );
};

const ValueCard = ({ n, title, body, tag }) => {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", padding: "40px 36px",
        background: "#F7F6F3", border: "1px solid #E3E1DC",
        borderRadius: 4, overflow: "hidden",
        transition: "all 280ms ease",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        boxShadow: hover ? "0 18px 40px -24px rgba(28,28,26,0.18)" : "0 0 0 rgba(0,0,0,0)",
        minHeight: 260,
        display: "flex", flexDirection: "column",
      }}>
      <ArcPanel className="value-arc"
        stroke={hover ? "var(--accent)" : "#1C1C1A"} />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", position: "relative", zIndex: 1 }}>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
          color: "#5C5C58", letterSpacing: "0.16em",
        }}>{n}</span>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
          color: "#5C5C58", letterSpacing: "0.16em", textTransform: "uppercase",
          padding: "4px 8px", border: "1px solid #E3E1DC", borderRadius: 999,
        }}>{tag}</span>
      </div>
      <h3 style={{
        fontFamily: "var(--serif)", fontSize: 32, fontWeight: 500,
        color: "#1C1C1A", letterSpacing: "-0.015em", lineHeight: 1.15,
        marginTop: 56, position: "relative", zIndex: 1,
      }}>{title}</h3>
      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 14.5, lineHeight: 1.6,
        color: "#5C5C58", marginTop: 16, position: "relative", zIndex: 1,
        textWrap: "pretty",
      }}>{body}</p>
    </div>
  );
};

// ─── SCANS ─────────────────────────────────────────────────────────
const Scans = () => {
  const scans = [
    {
      name: "MSK Joint MRI",
      price: "495",
      duration: "30–45 min",
      notes: ["No contrast", "Single joint", "Read incl."],
      desc: "Knee, shoulder, hip, ankle, wrist, or elbow.",
    },
    {
      name: "Brain MRI",
      price: "595",
      duration: "30–45 min",
      notes: ["No contrast", "Standard protocol", "Read incl."],
      desc: "Headache, neurological symptoms, seizure workup.",
      featured: true,
    },
    {
      name: "Spine MRI",
      price: "695",
      duration: "45–60 min",
      notes: ["No contrast", "Single region", "Read incl."],
      desc: "Cervical, thoracic, or lumbar.",
    },
  ];
  return (
    <section id="scans" data-screen-label="04 Scans" style={{
      padding: "var(--pad-section) 0", borderTop: "1px solid #E3E1DC",
    }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 40px" }}>
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", flexWrap: "wrap", gap: 32,
        }}>
          <div>
            <SectionLabel num="03">Available scans</SectionLabel>
            <h2 className="section-h2" style={{ marginTop: 32 }}>
              Fixed pricing.<br />No paperwork.
            </h2>
          </div>
          <div style={{
            fontFamily: "Inter, sans-serif", fontSize: 13.5, color: "#5C5C58",
            maxWidth: 320, lineHeight: 1.55, textAlign: "right",
          }}>
            All scans include a board-certified radiologist interpretation
            and are conducted at certified partner imaging centers.
          </div>
        </div>

        <div className="scans-grid">
          {scans.map((s) => <ScanCard key={s.name} {...s} />)}
        </div>

        <div style={{
          marginTop: 40, fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, color: "#5C5C58", letterSpacing: "0.14em",
          textTransform: "uppercase",
        }}>
          ← Scroll for additional protocols (CT, ultrasound) — Q3 2026
        </div>
      </div>
    </section>
  );
};

const ScanCard = ({ name, price, duration, notes, desc, featured }) => {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", padding: "40px 36px 36px",
        background: featured ? "#1C1C1A" : "#F7F6F3",
        color: featured ? "#F7F6F3" : "#1C1C1A",
        border: featured ? "1px solid #1C1C1A" : "1px solid #E3E1DC",
        borderRadius: 4, transition: "all 260ms ease",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        boxShadow: hover
          ? (featured ? "0 24px 60px -28px rgba(28,28,26,0.55)" : "0 18px 44px -26px rgba(28,28,26,0.22)")
          : "none",
        display: "flex", flexDirection: "column", minHeight: 380,
      }}>
      <div style={{
        display: "flex", justifyContent: "space-between",
        alignItems: "center",
      }}>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: featured ? "#A8A89F" : "#5C5C58",
        }}>{duration}</span>
        {featured && (
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--accent-light, #C8B98A)",
            padding: "4px 8px", border: "1px solid rgba(247,246,243,0.2)",
            borderRadius: 999,
          }}>Most booked</span>
        )}
      </div>

      <h3 style={{
        fontFamily: "var(--serif)", fontSize: 36, fontWeight: 500,
        letterSpacing: "-0.015em", lineHeight: 1.1, marginTop: 36,
      }}>{name}</h3>

      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 13.5, lineHeight: 1.55,
        color: featured ? "#A8A89F" : "#5C5C58", marginTop: 12,
      }}>{desc}</p>

      <div style={{ flex: 1 }} />

      <div style={{
        display: "flex", alignItems: "baseline", gap: 4, marginTop: 32,
      }}>
        <span style={{
          fontFamily: "var(--serif)", fontSize: 18, fontWeight: 400,
          color: featured ? "#A8A89F" : "#5C5C58",
        }}>$</span>
        <span style={{
          fontFamily: "var(--serif)", fontSize: 64, fontWeight: 500,
          letterSpacing: "-0.025em", lineHeight: 1,
        }}>{price}</span>
        <span style={{
          fontFamily: "Inter, sans-serif", fontSize: 13,
          color: featured ? "#A8A89F" : "#5C5C58",
          marginLeft: 10,
        }}>flat · all-in</span>
      </div>

      <ul style={{
        listStyle: "none", padding: 0, margin: "24px 0 0",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        {notes.map((n) => (
          <li key={n} style={{
            fontFamily: "Inter, sans-serif", fontSize: 13.5,
            color: featured ? "#D8D8D2" : "#1C1C1A",
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{
              width: 14, height: 1,
              background: featured ? "#A8A89F" : "#5C5C58",
            }} />
            {n}
          </li>
        ))}
      </ul>

      <button style={{
        marginTop: 28, padding: "13px 18px",
        fontFamily: "Inter, sans-serif", fontSize: 13.5, fontWeight: 500,
        background: featured ? "#F7F6F3" : "transparent",
        color: featured ? "#1C1C1A" : "#1C1C1A",
        border: featured ? "none" : "1px solid #1C1C1A",
        cursor: "pointer", borderRadius: 2, letterSpacing: "-0.005em",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        transition: "all 200ms ease",
        opacity: hover ? 0.92 : 1,
      }}>
        <span>Book this scan</span>
        <span style={{ transform: hover ? "translateX(3px)" : "translateX(0)", transition: "transform 200ms" }}>→</span>
      </button>
    </div>
  );
};

// ─── HOW IT WORKS ──────────────────────────────────────────────────
const How = () => {
  const steps = [
    {
      n: "01", title: "Choose your scan",
      body: "Select from MSK, brain, or spine MRI. Fixed pricing. No referral required in most states.",
    },
    {
      n: "02", title: "Book an off-peak time",
      body: "Pick from same-week evening and weekend slots at a partner imaging center near you.",
    },
    {
      n: "03", title: "Complete your scan",
      body: "Arrive, complete intake, and receive your scan on certified equipment with licensed technologists.",
    },
    {
      n: "04", title: "Receive your results",
      body: "A board-certified radiologist's interpretation is delivered to you within 24–48 hours.",
    },
  ];
  return (
    <section id="how" data-screen-label="05 How" style={{
      padding: "var(--pad-section) 0", borderTop: "1px solid #E3E1DC",
      position: "relative", overflow: "hidden",
    }}>
      <Lattice className="how-lattice" stroke="#1C1C1A" />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 40px", position: "relative" }}>
        <SectionLabel num="04">How it works</SectionLabel>
        <h2 className="section-h2" style={{ marginTop: 32, maxWidth: 720 }}>
          Four steps. <em style={{ fontStyle: "italic", color: "var(--accent)" }}>No friction.</em>
        </h2>

        <div className="how-steps">
          {steps.map((s, i) => (
            <div key={s.n} className="how-step">
              <div className="how-step-num">
                <span>{s.n}</span>
                {i < steps.length - 1 && <span className="how-step-rule" />}
              </div>
              <div>
                <h3 style={{
                  fontFamily: "var(--serif)", fontSize: 26, fontWeight: 500,
                  color: "#1C1C1A", letterSpacing: "-0.015em", lineHeight: 1.2,
                }}>{s.title}</h3>
                <p style={{
                  fontFamily: "Inter, sans-serif", fontSize: 14.5,
                  color: "#5C5C58", lineHeight: 1.6, marginTop: 12,
                  textWrap: "pretty",
                }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── TRUST ─────────────────────────────────────────────────────────
const Trust = () => (
  <section id="trust" data-screen-label="06 Trust" style={{
    padding: "var(--pad-section) 0", borderTop: "1px solid #E3E1DC",
    background: "#1C1C1A", color: "#F7F6F3",
  }}>
    <div style={{
      maxWidth: 1320, margin: "0 auto", padding: "0 40px",
      display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80,
      alignItems: "start",
    }} className="problem-grid">
      <div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
          letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#A8A89F", display: "flex", alignItems: "center", gap: 14,
        }}>
          <Crosshair size={11} color="#A8A89F" />
          <span style={{ color: "#F7F6F3", fontWeight: 500 }}>§ 05</span>
          <span style={{ width: 24, height: 1, background: "rgba(247,246,243,0.18)" }} />
          <span>Trust & quality</span>
        </div>
        <h2 className="section-h2" style={{ marginTop: 32, color: "#F7F6F3" }}>
          Built on existing<br />clinical infrastructure.
        </h2>
      </div>
      <div style={{ paddingTop: 12 }}>
        <p style={{
          fontFamily: "var(--serif)", fontSize: 26, lineHeight: 1.42,
          color: "#F7F6F3", letterSpacing: "-0.01em", fontWeight: 400,
          textWrap: "pretty",
        }}>
          Radiolo partners with established imaging centers operating
          certified equipment and licensed technologists. All scans
          include interpretation by board-certified radiologists.
        </p>

        <div className="trust-grid">
          {[
            ["ACR", "Accredited centers"],
            ["ABR", "Board-certified reads"],
            ["HIPAA", "Patient data secured"],
            ["1.5T / 3T", "Standard protocols"],
          ].map(([k, v]) => (
            <div key={k} className="trust-cell">
              <div style={{
                fontFamily: "var(--serif)", fontSize: 22,
                color: "#F7F6F3", fontWeight: 500, letterSpacing: "-0.01em",
              }}>{k}</div>
              <div style={{
                fontFamily: "Inter, sans-serif", fontSize: 12.5,
                color: "#A8A89F", marginTop: 8, letterSpacing: "0.005em",
              }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ─── FAQ ───────────────────────────────────────────────────────────
const FAQ = () => {
  const items = [
    {
      q: "Do I need insurance?",
      a: "No. Radiolo is a cash-pay service. You pay one flat, upfront price — there is no insurance billing, no claim, no co-pay surprise. If you'd like to submit your scan to insurance after the fact, we can provide an itemized superbill.",
    },
    {
      q: "Do I need a doctor's order?",
      a: "Requirements vary by state and scan type. In most cases we can route your booking through one of our affiliated providers if you don't already have a referral. We'll let you know during checkout.",
    },
    {
      q: "What's included in the price?",
      a: "Everything: the scan itself, all required imaging sequences, use of partner facility and equipment, and a board-certified radiologist's interpretation delivered within 24–48 hours. No facility fees, no read fees, no add-ons.",
    },
    {
      q: "When will I receive my results?",
      a: "Most reads are returned within 24–48 hours of your scan completion. You'll receive a notification when your interpretation is available, along with a downloadable copy of your full imaging study.",
    },
    {
      q: "Can I use HSA/FSA funds?",
      a: "Yes. Radiolo is an eligible medical expense for both HSA and FSA accounts. We accept HSA/FSA cards directly at checkout, and can provide receipts for reimbursement.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-screen-label="07 FAQ" style={{
      padding: "var(--pad-section) 0", borderTop: "1px solid #E3E1DC",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "0 40px",
        display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80,
      }} className="problem-grid">
        <div>
          <SectionLabel num="06">Common questions</SectionLabel>
          <h2 className="section-h2" style={{ marginTop: 32 }}>
            Answers, plainly.
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 14.5,
            color: "#5C5C58", lineHeight: 1.6, marginTop: 24, maxWidth: 320,
          }}>
            Still curious? Reach our care team at{" "}
            <a href="mailto:hello@radiolo.com" style={{
              color: "#1C1C1A", textDecoration: "underline",
              textDecorationThickness: 1, textUnderlineOffset: 3,
            }}>hello [at] radiolo [dot] com</a>.
          </p>
        </div>
        <div style={{ borderTop: "1px solid #E3E1DC" }}>
          {items.map((it, i) => (
            <FAQRow key={i} {...it} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

const FAQRow = ({ q, a, open, onClick }) => {
  const ref = useRef(null);
  const [h, setH] = useState(0);
  useEffect(() => {
    if (ref.current) setH(ref.current.scrollHeight);
  }, [a]);
  return (
    <div style={{ borderBottom: "1px solid #E3E1DC" }}>
      <button onClick={onClick}
        style={{
          width: "100%", padding: "26px 0", display: "flex",
          justifyContent: "space-between", alignItems: "center",
          background: "transparent", border: "none", cursor: "pointer",
          textAlign: "left",
        }}>
        <span style={{
          fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500,
          color: "#1C1C1A", letterSpacing: "-0.015em", lineHeight: 1.2,
        }}>{q}</span>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
          color: "#5C5C58", marginLeft: 24,
          transition: "transform 280ms ease",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>+</span>
      </button>
      <div style={{
        height: open ? h : 0, overflow: "hidden",
        transition: "height 320ms cubic-bezier(0.4, 0, 0.2, 1)",
      }}>
        <div ref={ref} style={{ paddingBottom: 28, paddingRight: 60 }}>
          <p style={{
            fontFamily: "Inter, sans-serif", fontSize: 15.5, lineHeight: 1.65,
            color: "#5C5C58", margin: 0, textWrap: "pretty",
          }}>{a}</p>
        </div>
      </div>
    </div>
  );
};

// ─── FINAL CTA ─────────────────────────────────────────────────────
const FinalCTA = () => (
  <section data-screen-label="08 Final CTA" style={{
    padding: "var(--pad-section) 0",
    borderTop: "1px solid #E3E1DC",
    position: "relative", overflow: "hidden", textAlign: "center",
  }}>
    <ScanField className="final-bg" stroke="#1C1C1A" />
    <div style={{
      maxWidth: 900, margin: "0 auto", padding: "0 40px", position: "relative",
    }}>
      <SectionLabel num="08" style={{ justifyContent: "center", display: "inline-flex" }}>
        Get started
      </SectionLabel>
      <h2 style={{
        fontFamily: "var(--serif)", fontSize: "clamp(56px, 9vw, 120px)",
        fontWeight: 500, color: "#1C1C1A", letterSpacing: "-0.025em",
        lineHeight: 1.02, marginTop: 40,
      }}>
        Imaging access,<br />
        <em style={{ fontStyle: "italic", color: "var(--accent)" }}>simplified.</em>
      </h2>
      <p style={{
        fontFamily: "Inter, sans-serif", fontSize: 18, color: "#5C5C58",
        marginTop: 32, maxWidth: 540, marginLeft: "auto", marginRight: "auto",
        lineHeight: 1.55,
      }}>
        Browse fixed-price scans available at certified partner facilities near you.
      </p>
      <div style={{
        display: "flex", gap: 14, marginTop: 48, justifyContent: "center", flexWrap: "wrap",
      }}>
        <CTA primary>View available scans</CTA>
        <CTA>Talk to our team</CTA>
      </div>
    </div>
  </section>
);

// ─── FOOTER ────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{
    padding: "60px 0 40px", borderTop: "1px solid #E3E1DC",
    background: "#F7F6F3",
  }}>
    <div style={{
      maxWidth: 1320, margin: "0 auto", padding: "0 40px",
      display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48,
    }} className="footer-grid">
      <div>
        <Wordmark size={20} />
        <p style={{
          fontFamily: "Inter, sans-serif", fontSize: 13, color: "#5C5C58",
          marginTop: 20, lineHeight: 1.55, maxWidth: 320,
        }}>
          A premium infrastructure layer for medical imaging access.
          Operating in select U.S. metros, expanding nationwide.
        </p>
      </div>
      {[
        ["Patients", ["Available scans", "How it works", "Pricing", "FAQ"]],
        ["Partners", ["Imaging centers", "Referring providers", "Press", "Careers"]],
        ["Company", ["About", "Contact", "Privacy", "Terms"]],
      ].map(([h, links]) => (
        <div key={h}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "#5C5C58", marginBottom: 18,
          }}>{h}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
            {links.map((l) => (
              <li key={l}>
                <a href="#" style={{
                  fontFamily: "Inter, sans-serif", fontSize: 13.5,
                  color: "#1C1C1A", textDecoration: "none",
                }}>{l}</a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
    <div style={{
      maxWidth: 1320, margin: "60px auto 0", padding: "24px 40px 0",
      borderTop: "1px solid #E3E1DC",
      display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
      letterSpacing: "0.12em", textTransform: "uppercase", color: "#5C5C58",
    }}>
      <span>© 2026 Radiolo, Inc.</span>
      <span>Not a substitute for medical advice.</span>
      <span>v1.0 · Updated May 2026</span>
    </div>
  </footer>
);

// ─── App ───────────────────────────────────────────────────────────
const App = () => {
  const [scrolled, setScrolled] = useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // apply tweak vars to root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", tweaks.accent);
    r.style.setProperty("--serif", `'${tweaks.serif}', 'Cormorant Garamond', Georgia, serif`);
    const dens = tweaks.density;
    r.style.setProperty("--pad-section", dens === "compact" ? "100px" : dens === "spacious" ? "180px" : "140px");
    r.style.setProperty("--pad-top", dens === "compact" ? "140px" : dens === "spacious" ? "200px" : "170px");
    r.style.setProperty("--show-grid", tweaks.showGrid ? "1" : "0");
  }, [tweaks]);

  return (
    <>
      <Nav scrolled={scrolled} />
      <Hero />
      <Problem />
      <Values />
      <Scans />
      <How />
      <Trust />
      <FAQ />
      <FinalCTA />
      <Footer />

      {tweaks.showGrid && <GridOverlay />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Type">
          <TweakRadio label="Display serif" value={tweaks.serif}
            options={[
              { label: "Cormorant", value: "Cormorant Garamond" },
              { label: "Playfair", value: "Playfair Display" },
              { label: "EB Garamond", value: "EB Garamond" },
            ]}
            onChange={(v) => setTweak("serif", v)} />
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor label="Accent" value={tweaks.accent}
            options={["#1F2A44", "#1C1C1A", "#3A4A2E", "#6B4423"]}
            onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Density" value={tweaks.density}
            options={[
              { label: "Compact", value: "compact" },
              { label: "Comfort", value: "comfortable" },
              { label: "Spacious", value: "spacious" },
            ]}
            onChange={(v) => setTweak("density", v)} />
          <TweakToggle label="Baseline grid" value={tweaks.showGrid}
            onChange={(v) => setTweak("showGrid", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

const GridOverlay = () => (
  <div style={{
    position: "fixed", inset: 0, pointerEvents: "none", zIndex: 30,
    backgroundImage: "linear-gradient(rgba(31,42,68,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(31,42,68,0.08) 1px, transparent 1px)",
    backgroundSize: "8px 8px",
  }} />
);

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