const { Button } = window.KMYDesignSystem_a7a4fb;

// Mandatory tagline reveal — a standalone display moment, separate from the hero.
// Each word fades from a muted tone to full color in reading order as the
// section crosses into view, staggered on the fluid dynamics easing curve.
function TaglineReveal() {
  const [ref, seen] = useInView(0.5);
  const lines = [
    ["Homeowners", "decide", "who", "to", "call", "in", "under", "a", "minute."],
    ["Give", "them", "a", "reason", "it", "is", "you."],
  ];
  let wordIndex = 0;
  return (
    <section className="sec sec--tagline" ref={ref}>
      <div className="wrap">
        <p className={"tagline" + (seen ? " is-on" : "")}>
          {lines.map((line, li) => (
            <span className="tagline__line" key={li}>
              {line.map((w, i) => {
                const idx = wordIndex++;
                return <span className="tagline__w" key={i} style={{ transitionDelay: (idx * 55) + "ms" }}>{w}{i < line.length - 1 ? " " : ""}</span>;
              })}
            </span>
          ))}
        </p>
      </div>
    </section>
  );
}

function Transformation() {
  const [ref, seen] = useInView(0.25);
  const notes = [
    ["01", "Trust", "Reputation, reviews, real work, and credibility become visible in the first screen, not on a buried page."],
    ["02", "Clarity", "One sentence establishes what the business does, who it serves, and why it is the right choice."],
    ["03", "Action", "Calling, booking, or requesting an estimate is the most obvious thing on the page, at every scroll depth."],
  ];
  return (
    <section className="sec" id="transformation" ref={ref}>
      <div className="wrap">
        <div className="sec__head">
          <Eyebrow>Website transformation</Eyebrow>
          <h2 className="h-display">A strong business should not be held back by a weak website.</h2>
        </div>
        <div className="cmp">
          <div className="cmp__frames">
            <figure className="cmp__f">
              <figcaption><span className="tick" />Now, undifferentiated</figcaption>
              <PageSkeleton mode="weak" />
              <p className="cmp__note">Seven nav items. No proof. The only way to get in touch sits at the bottom.</p>
            </figure>
            <figure className="cmp__f cmp__f--after">
              <figcaption><span className="tick tick--accent" />After, ordered by decision</figcaption>
              <PageSkeleton mode="strong" />
              <p className="cmp__note">Same content. Ordered the way a customer decides: trust, then clarity, then action.</p>
            </figure>
          </div>
          <ol className={"annots" + (seen ? " is-on" : "")}>
            {notes.map(([n, t, d], i) => (
              <li key={t} style={{ transitionDelay: (i * 110) + "ms" }}>
                <span className="annots__n">{n}</span>
                <h3>{t}</h3>
                <p>{d}</p>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const [ref, seen] = useInView(0.3);
  const items = [
    ["More calls booked", "Trust signals and one clear CTA appear before a visitor has a reason to bounce, so fewer people leave without acting."],
    ["Live in two weeks", "Ten to fourteen days from a signed brief to launch, not two months of back and forth."],
    ["One flat price", "$3,500 for the build. No hourly billing, no surprise invoices, fifty percent to start and fifty percent before launch."],
    ["Easier to keep current", "The $400 monthly care plan covers content updates and small fixes after launch. Optional, and cancel anytime."],
    ["Built the way customers decide", "Trust, then clarity, then the ask, in that order, because that is the order a homeowner actually chooses in."],
  ];
  return (
    <section className="sec" id="benefits" ref={ref}>
      <div className="wrap">
        <div className="sec__head">
          <Eyebrow>Why it works</Eyebrow>
          <h2 className="h-display">What changes when the structure is right.</h2>
        </div>
        <ul className={"benefits" + (seen ? " is-on" : "")}>
          {items.map(([t, d], i) => (
            <li key={t} style={{ transitionDelay: (i * 90) + "ms" }}>
              <h3>{t}</h3>
              <p>{d}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function BeforeAfter() {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const drag = React.useRef(false);
  const move = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    setPos(Math.min(97, Math.max(3, ((clientX - r.left) / r.width) * 100)));
  };
  React.useEffect(() => {
    const onMove = (e) => { if (drag.current) { move(e.clientX); e.preventDefault(); } };
    const onUp = () => { drag.current = false; document.body.style.userSelect = ""; };
    window.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", onUp);
    return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); };
  }, []);
  const start = (e) => { drag.current = true; document.body.style.userSelect = "none"; move(e.clientX); };
  const key = (e) => {
    if (e.key === "ArrowLeft") setPos((p) => Math.max(3, p - 4));
    if (e.key === "ArrowRight") setPos((p) => Math.min(97, p + 4));
  };
  return (
    <div className="ba" ref={ref} onPointerDown={start}>
      <div className="ba__layer"><image-slot id="ba-after-hero" placeholder="After — rebuilt hero"></image-slot></div>
      <div className="ba__layer ba__layer--after" style={{ clipPath: `inset(0 0 0 ${pos}%)` }}><image-slot id="ba-before-hero" placeholder="Before — original hero"></image-slot></div>
      <span className="ba__chip ba__chip--b">After</span>
      <span className="ba__chip ba__chip--a">Before</span>
      <div className="ba__bar" style={{ left: `${pos}%` }} role="slider" tabIndex="0" aria-label="Compare after and before" aria-valuenow={Math.round(pos)} aria-valuemin="0" aria-valuemax="100" onKeyDown={key}>
        <span className="ba__grip" aria-hidden="true"><i></i><i></i></span>
      </div>
    </div>
  );
}

function CaseStudy() {
  const specs = [
    ["Business", "Corus Construction LLC, a roofing company in Duluth, GA. Average job is a $10 to $15k roof replacement."],
    ["Problem", "All the raw material was there, but every page had grown by addition. Red was used for banners, badges, and CTAs alike, so nothing read as the next step. Services ran four dense paragraphs written for search engines."],
    ["What changed", "Palette cut to one red, near black, and white, red reserved for CTAs. Hero rebuilt as full bleed video with one headline and one CTA. Nav went from seven items to three, and paragraph service copy became a scannable photo card grid."],
    ["Scope", "Full redesign and rebuild, Figma to Framer"],
    ["Result", "One idea per section instead of several. A homepage a homeowner can read in under a minute and know who to call."],
  ];
  return (
    <section className="sec sec--case" id="case">
      <div className="wrap">
        <div className="sec__head sec__head--split">
          <Eyebrow accent>Featured case study, Corus Roofing</Eyebrow>
          <h2 className="h-display">Same roofing company. A site that finally reads as trustworthy.</h2>
        </div>
        <div className="case">
          <div className="case__specs">
            {specs.map(([k, v]) => (
              <div className="case__row" key={k}><span className="case__k">{k}</span><p className="case__v">{v}</p></div>
            ))}
            <a className="link-arrow" href="Corus Roofing - Case Study.html">Read the full case study <span aria-hidden="true">→</span></a>
          </div>
          <div className="case__shots">
            <div className="case__shot case__shot--lead"><BeforeAfter /></div>
            <div className="case__shot"><image-slot id="cs-svc" shape="rounded" radius="4" placeholder="Service card grid"></image-slot></div>
            <div className="case__shot"><image-slot id="cs-mob" shape="rounded" radius="4" placeholder="Mobile view"></image-slot></div>
            <p className="case__cap">Drag the divider to compare the rebuilt hero with the original. <a href="Corus Roofing - Case Study.html">See every section</a>.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    ["01", "Audit and direction", "Identify what is unclear, missing, or blocking action.", "Days 1 to 2"],
    ["02", "Build in Framer", "Turn raw business material into clear structure, copy, and a polished responsive build.", "Days 3 to 10"],
    ["03", "Launch and care", "Final checks, handoff, and the monthly care plan starts if you want ongoing updates.", "Days 11 to 14"],
  ];
  const [ref, seen] = useInView(0.3);
  return (
    <section className="sec" id="process" ref={ref}>
      <div className="wrap">
        <div className="sec__head">
          <Eyebrow>Process</Eyebrow>
          <h2 className="h-display">Three moves, start to launch.</h2>
        </div>
        <ol className={"tl" + (seen ? " is-on" : "")}>
          {steps.map(([n, t, d, when], i) => (
            <li className="tl__step" key={n} style={{ transitionDelay: (i * 120) + "ms" }}>
              <div className="tl__rail"><span className="tl__dot" /></div>
              <div className="tl__meta"><span className="mono tl__n">{n}</span><span className="mono tl__when">{when}</span></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Package() {
  const terms = [
    ["Investment", "$3,500 flat", "50% to start, 50% before launch."],
    ["Scope", "Up to 5 pages", "Structure, site copy, and responsive build."],
    ["Timeline", "10 to 14 days", "From signed brief to launch ready."],
    ["Revisions", "Two rounds", "Consolidated feedback, one round at a time."],
    ["Platform", "Framer build", "Handed over editable, with a walkthrough."],
    ["Care plan", "$400 a month", "Optional. Content updates and small fixes after launch, cancel anytime."],
    ["After launch", "30 day bug fix window", "Anything broken gets fixed, no charge."],
  ];
  return (
    <section className="sec sec--sheet" id="package">
      <div className="wrap">
        <div className="sheet__head">
          <Eyebrow>Package</Eyebrow>
          <h2 className="h-display">Focused scope. Fast launch. No vague agency process.</h2>
        </div>
        <div className="sheet">
          <dl className="sheet__terms">
            {terms.map(([k, v, d]) => (
              <div className="sheet__t" key={k}>
                <dt className="mono">{k}</dt>
                <dd><b>{v}</b><span>{d}</span></dd>
              </div>
            ))}
          </dl>
          <aside className="sheet__side">
            <h3>What you supply</h3>
            <p>Raw business material, services, photos, reviews, anything you already send customers. Rough is fine.</p>
            <h3>What I do with it</h3>
            <p>Shape the structure and write the site copy, then build it. You approve before anything goes live.</p>
            <div className="sheet__cta"><Button as="a" href="https://tally.so/r/Zjb89a" target="_blank" rel="noopener" size="lg" variant="primary">Get a free website audit</Button></div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, a, index }) {
  const [ref, seen] = useInView(0.4);
  return (
    <li ref={ref} className={"faq__i" + (seen ? " is-on" : "")} style={{ transitionDelay: (Math.min(index, 6) * 60) + "ms" }}>
      <details className="faq__d">
        <summary className="faq__q">
          <span>{q}</span>
          <svg className="faq__chev" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M4 6l4 4 4-4" /></svg>
        </summary>
        <p className="faq__a">{a}</p>
      </details>
    </li>
  );
}

function FAQ() {
  const items = [
    ["How long does a build take?", "Ten to fourteen days from a signed brief to a launch ready site, typically."],
    ["What is included in the $3,500 flat price?", "Up to five pages, structure, site copy, and a responsive Framer build. Fifty percent to start, fifty percent before launch."],
    ["What is the $400 monthly care plan?", "Content updates, small fixes, and hosting management after launch. It is optional, month to month, and not a lock in contract."],
    ["Do I own the website?", "Yes. It is handed over editable in Framer with a walkthrough, whether or not you keep the care plan."],
    ["What if I already have a website?", "I audit what exists first. If a full rebuild is not the right move, I will tell you before we talk about a project."],
    ["How many revisions do I get?", "Two rounds, consolidated feedback, one round at a time."],
    ["What do I need to provide?", "Raw business material: services, photos, reviews, anything you already send customers. Rough drafts are fine."],
    ["Do you write the copy?", "Yes. I shape the structure and write the site copy, then build it. You approve before anything goes live."],
    ["What happens if something breaks after launch?", "A thirty day bug fix window is included at no charge."],
    ["Do you only work with roofing companies?", "Corus Roofing is the featured case study, but the same process applies to any home service trade: kitchens, baths, electrical, plumbing, and more."],
    ["Can I cancel the care plan later?", "Yes, month to month, no cancellation fee."],
    ["How do we start?", "Book a twenty minute website audit. I will point out the highest impact fixes before we discuss a project."],
  ];
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div className="sec__head">
          <Eyebrow>Questions</Eyebrow>
          <h2 className="h-display">Before you book the audit.</h2>
        </div>
        <ul className="faq">
          {items.map(([q, a], i) => <FaqItem key={q} q={q} a={a} index={i} />)}
        </ul>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="sec sec--cta" id="contact">
      <div className="wrap cta">
        <h2 className="h-display cta__h">Your website should make your business easier to trust.</h2>
        <p className="cta__p">Book a 20 minute website audit. We will identify the highest impact improvements before discussing a project.</p>
        <div className="cta__row">
          <Button as="a" href="https://tally.so/r/Zjb89a" 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>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer className="ftr">
      <div className="wrap ftr__in">
        <span className="wordmark wordmark--sm">KMY</span>
        <nav className="ftr__links">
          <a href="mailto:kmydesignstudio@gmail.com">kmydesignstudio@gmail.com</a>
          <a href="https://www.linkedin.com/in/danielmykim/" target="_blank" rel="noopener">LinkedIn</a>
        </nav>
        <span className="ftr__c">© 2026 KMY Design</span>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <a className="skip-link" href="#main">Skip to content</a>
      <ScrollProgress />
      <SiteHeader />
      <main id="main">
        <Hero />
        <TaglineReveal />
        <Transformation />
        <Benefits />
        <Process />
        <CaseStudy />
        <Package />
        <FAQ />
        <FinalCTA />
      </main>
      <SiteFooter />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("kmy-app")).render(<App />);