const { useState, useEffect } = React;
const { Button } = window.KMYDesignSystem_a7a4fb;

const NAV_LINKS = [
  ["#transformation", "Transformation"],
  ["#benefits", "Benefits"],
  ["#case", "Case study"],
  ["#package", "Package"],
  ["#faq", "FAQ"],
];
const TALLY_URL = "https://tally.so/r/Zjb89a";
const KMY_EMAIL = "kmydesignstudio@gmail.com";

function SiteHeader() {
  return <IslandNav links={NAV_LINKS} ctaHref={TALLY_URL} email={KMY_EMAIL} />;
}

function StateSwitch({ value, onChange }) {
  return (
    <div className="switch" role="group" aria-label="Website structure state">
      {[["weak", "Before"], ["strong", "After"]].map(([k, label]) => (
        <button key={k} className={"switch__b" + (value === k ? " is-on" : "")} aria-pressed={value === k} onClick={() => onChange(k)}>{label}</button>
      ))}
    </div>
  );
}

function Hero() {
  const [mode, setMode] = useState("weak");
  const [ref, seen] = useInView(0.4);
  useEffect(() => {
    if (!seen) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const t = setTimeout(() => setMode("strong"), reduce ? 0 : 1100);
    return () => clearTimeout(t);
  }, [seen]);

  const notes = [
    ["Trust", "Reviews and real work surface above the fold."],
    ["Clarity", "One sentence says what you do and who for."],
    ["Action", "One obvious next step, repeated where it is needed."],
  ];

  return (
    <section className="hero" id="top" ref={ref}>
      <div className="hero__mark" aria-hidden="true">KMY</div>
      <div className="hero__in">
        <div className="hero__copy">
          <Eyebrow accent>Conversion focused Framer websites</Eyebrow>
          <h1 className="hero__h1">Turn visitors into estimate requests.</h1>
          <p className="hero__sub">A clear, credible site for home service businesses: real proof up front, one obvious next step, live in two weeks.</p>
          <div className="hero__cta">
            <Button as="a" href={TALLY_URL} target="_blank" rel="noopener" size="lg" variant="primary">Get a free website audit</Button>
            <span className="hero__price">Flat $3,500 build. $400 a month keeps it current.</span>
          </div>
        </div>
        <div className="hero__stage">
          <div className="stage__head">
            <span className="stage__label">Structure, not decoration</span>
            <StateSwitch value={mode} onChange={setMode} />
          </div>
          <div className="stage__frames">
            <div className={"stage__layer" + (mode === "weak" ? " is-on" : "")}><PageSkeleton mode="weak" /></div>
            <div className={"stage__layer" + (mode === "strong" ? " is-on" : "")}><PageSkeleton mode="strong" /></div>
          </div>
          <ul className={"stage__notes" + (mode === "strong" ? " is-on" : "")}>
            {notes.map(([t, d], i) => (
              <li key={t} style={{ transitionDelay: (i * 90) + "ms" }}><b>{t}</b><span>{d}</span></li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { NAV_LINKS, TALLY_URL, KMY_EMAIL, SiteHeader, Hero });