const { Button } = window.KMYDesignSystem_a7a4fb;
const TALLY = "https://tally.so/r/Zjb89a";
const KMY_EMAIL = "kmydesignstudio@gmail.com";

const CASE_NAV_LINKS = [
  ["KMY Design - Landing.html#transformation", "Transformation"],
  ["KMY Design - Landing.html#benefits", "Benefits"],
  ["KMY Design - Landing.html#case", "Work"],
  ["KMY Design - Landing.html#package", "Package"],
  ["KMY Design - Landing.html#faq", "FAQ"],
];

function CaseHeader() {
  return <IslandNav links={CASE_NAV_LINKS} ctaHref={TALLY} email={KMY_EMAIL} wordmarkHref="KMY Design - Landing.html" />;
}

function Slider({ before, after, ratio, ratioSm, slot, eager }) {
  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); };
  }, []);
  // pointerdown already sets the divider to the press point, so a tap anywhere
  // jumps the comparison there — the primary interaction on touch.
  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));
  };
  const style = { "--ba-ratio": ratio, "--ba-ratio-sm": ratioSm || ratio };
  return (
    <div className="ba" ref={ref} onPointerDown={start} style={style}>
      <div className="ba__layer">{after ? <Shot name={after} alt="Rebuilt site" eager={eager} /> : <image-slot id={`ba-after-${slot}`} placeholder="After — rebuilt"></image-slot>}</div>
      <div className="ba__layer ba__layer--after" style={{ clipPath: `inset(0 0 0 ${pos}%)` }}><Shot name={before} alt="Original site" eager={eager} /></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 CaseHero() {
  const meta = [
    ["Role", "Designer + builder"],
    ["Client", "Corus Construction LLC · Duluth, GA"],
    ["Scope", "Full redesign and rebuild"],
    ["Tools", "Figma → Framer"],
    ["Timeline", "7 days"],
    ["Deliverable", "Live Framer site, handed over editable"],
  ];
  return (
    <section className="cs-hero">
      <div className="wrap">
        <a className="cs-back" href="KMY Design - Landing.html#case"><span aria-hidden="true">←</span> Back to KMY Design</a>
        <Eyebrow accent>Case study</Eyebrow>
        <h1 className="cs-h1">Rebuilding a roofing company's website so the work looks as good as it is.</h1>
        <p className="cs-lede">Corus Roofing already had a live site with services, photos, and a phone number. What it did not have was a design that made any of it feel trustworthy. For a business where the average job is a $10,000 to $15,000 roof replacement, that gap costs real money.</p>
        <dl className="cs-meta">
          {meta.map(([k, v]) => (
            <div className="cs-meta__i" key={k}><dt className="mono">{k}</dt><dd>{v}</dd></div>
          ))}
        </dl>
      </div>
    </section>
  );
}

function Compare() {
  // ratioSm gives each comparison more height on a phone; at the desktop ratios
  // these screenshots collapse to 150px tall and stop being readable.
  const parts = [
    ["full", "Full page", "The whole homepage, top to bottom: one idea per section instead of several.", "1072/660", "1072/1200"],
    ["services", "Services", "Six icon cards with dense paragraph copy, versus photo cards with a two-line summary and a link.", "1440/1800", "1440/1700"],
    ["process", "Process", "The same three steps — out of a full-red band that competed with every other section.", "1440/660", "1440/1150"],
    ["faq", "FAQ", "Same questions, quieter type, and enough spacing to actually scan them.", "1440/670", "1440/1150"],
  ];
  return (
    <section className="sec" id="compare">
      <div className="wrap">
        <div className="cmp-head">
          <Eyebrow accent>Before and after</Eyebrow>
          <h2 className="h-display">Section by section.</h2>
          <p className="cs-note">Drag any divider. Left is the rebuild, right is the original.</p>
        </div>
        <div className="cmp-list">
          {parts.map(([k, label, note, ratio, ratioSm], i) => (
            <div className="cmp-item" key={k}>
              <div className="cmp-item__head">
                <span className="cmp-item__n mono">{label}</span>
                <p>{note}</p>
              </div>
              <Slider ratio={ratio} ratioSm={ratioSm} slot={k} eager={i === 0} after={k === "full" ? "" : `after-${k}`} before={`before-${k}`} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Diagnosis() {
  const items = [
    ["Color with no hierarchy", "Red appeared in the top bar, the nav accents, the offer badge, the CTA buttons, and a full-width banner. When everything is the accent color, nothing is."],
    ["Copy written for search engines", "Each service section ran four or five dense paragraphs, repeating the same point about quality materials in different phrasing. Good keyword coverage, rough to read."],
    ["Stacked trust signals", "A row of badge icons sat above the fold competing with the actual value proposition instead of telling one clear story."],
    ["A sprawling nav", "Seven top-level items with dropdowns, for a business where a visitor needs three things: what you do, why you are credible, how to reach you."],
  ];
  return (
    <section className="sec">
      <div className="wrap cs-split">
        <div className="cs-split__head">
          <Eyebrow>The problem</Eyebrow>
          <h2 className="h-display">Not a bad site. A site nobody had stepped back from.</h2>
          <p className="cs-note">Every new page and promotion got tacked on without anyone asking what the homepage was actually for.</p>
        </div>
        <ol className="cs-list">
          {items.map(([t, d], i) => (
            <li key={t}><span className="cs-list__n mono">{String(i + 1).padStart(2, "0")}</span><h3>{t}</h3><p>{d}</p></li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Work() {
  const items = [
    ["Cut the palette down", "One red, near-black, and white. Red now appears only where it should mean something: a CTA, or a highlighted word in a headline."],
    ["Rebuilt the hero", "A full-bleed video of the crew at work, a two-line headline, one clear CTA. No badge or offer box fighting for the same eyeball."],
    ["Simplified the structure", "Nav went from seven items with dropdowns to three plus one action. Paragraph-form service copy became a photo-card grid with a two-line summary and a link for depth."],
  ];
  return (
    <section className="sec">
      <div className="wrap cs-split">
        <div className="cs-split__head">
          <Eyebrow accent>What I did</Eyebrow>
          <h2 className="h-display">Same content. Three decisions.</h2>
          <p className="cs-note">No new copywriting, no new photography — a redesign of what already existed. The stat counters, the three-step process, and the FAQ all carried over in concept; each one just got room to breathe.</p>
        </div>
        <ol className="cs-list">
          {items.map(([t, d], i) => (
            <li key={t}><span className="cs-list__n mono">{String(i + 1).padStart(2, "0")}</span><h3>{t}</h3><p>{d}</p></li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function Table({ eyebrow, title, note, rows, cols }) {
  return (
    <div className="cs-table">
      <div className="cs-table__head">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="cs-h2">{title}</h2>
      </div>
      <div className="cs-tr cs-tr--h"><span className="mono">Metric</span><span className="mono">{cols[0]}</span><span className="mono">{cols[1]}</span></div>
      {rows.map(([k, a, b]) => (
        <div className="cs-tr" key={k}><span className="cs-tr__k">{k}</span><span className="cs-tr__a">{a}</span><span className="cs-tr__b">{b}</span></div>
      ))}
      {note ? <p className="cs-note cs-note--table">{note}</p> : null}
    </div>
  );
}

function Results() {
  return (
    <section className="sec sec--sunken" id="results">
      <div className="wrap cs-tables">
        <Table
          eyebrow="Side by side"
          title="What changed on the page"
          cols={["Before", "After"]}
          rows={[
            ["Primary nav items", "7, several with dropdowns", "3, plus one CTA"],
            ["Hero", "Static image, badge + offer overlay", "Full-bleed video, one headline + CTA"],
            ["Service descriptions", "Four or five paragraphs each", "Photo card, 2 lines, “Learn more”"],
            ["Color usage", "Red across banners, badges, offers, CTAs", "Red reserved for CTAs and emphasis"],
            ["Trust signals", "Row of stock badge icons", "Stat counters: projects, years, customers"],
          ]}
        />
      </div>
    </section>
  );
}

function Next() {
  const items = [
    ["Compress the hero video", "The visual impact is worth it. The current file size is not — a shorter, harder-compressed loop for mobile first."],
    ["Build a real project gallery", "The photos are the strongest asset the business has, and right now they are decoration. Filterable jobs with location, roof type, and a before/after pair would do more selling than any headline I could write."],
    ["Push accessibility further", "Contrast and focus states on the FAQ accordion are the first things I would check, then keyboard order through the mobile menu."],
  ];
  return (
    <section className="sec">
      <div className="wrap cs-split">
        <div className="cs-split__head">
          <Eyebrow>What I'd do differently</Eyebrow>
          <h2 className="h-display">Three things I would revisit.</h2>
        </div>
        <ol className="cs-list cs-list--plain">
          {items.map(([t, d]) => (
            <li key={t}><h3>{t}</h3><p>{d}</p></li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function CaseCTA() {
  return (
    <section className="sec sec--cta">
      <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. I will identify the highest-impact improvements before we discuss a project.</p>
        <div className="cta__row">
          <Button as="a" href={TALLY} 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 CaseFooter() {
  return (
    <footer className="ftr">
      <div className="wrap ftr__in">
        <a className="wordmark wordmark--sm" href="KMY Design - Landing.html">KMY</a>
        <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 CasePage() {
  return (
    <>
      <a className="skip-link" href="#main">Skip to content</a>
      <ScrollProgress />
      <CaseHeader />
      <main id="main">
        <CaseHero />
        <Compare />
        <Diagnosis />
        <Work />
        <Results />
        <Next />
        <CaseCTA />
      </main>
      <CaseFooter />
    </>
  );
}

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