/* global React */
// Cases (browser windows) + About + Contact + Footer

const CASES = [
  {
    n: "01", slug: "go-to-market", cat: "Go-to-Market", title: "Creative Brief — Go-to-Market Plan",
    desc: "A full launch playbook for a new product — positioning, audience, channel mix, and the creative platform to land it.",
    tabs: ["Brand Strategy", "Positioning", "GTM Planning"], grad: "linear-gradient(135deg, #0B5159, #2896B8)", img: "assets/case01.png", href: "project.html"
  },
  {
    n: "02", slug: "integrated-media", cat: "Creative Ideation", title: "360 Media + Creative",
    desc: "A connected paid, owned, and earned plan that carries one story across every touchpoint of the funnel.",
    tabs: ["Media Planning", "Omnichannel", "Funnel"], grad: "linear-gradient(135deg, #2896B8, #3BA68C)", img: "assets/case02.png", href: "project-2.html"
  },
  {
    n: "03", slug: "market-analysis", cat: "Market Research", title: "Market Analysis",
    desc: "Sizing, competitive landscape, and white-space mapping that frames where a brand should play and win.",
    tabs: ["Market Research", "Competitive", "Sizing"], grad: "linear-gradient(135deg, #3BA68C, #A5CFA1)", img: "assets/case03.jpg"
  },
  {
    n: "04", slug: "design-work", cat: "Design & Art Direction", title: "Selected Design Work",
    desc: "Earlier craft — packaging, social, and layout systems where the strategy gets translated into something you can see.",
    tabs: ["Art Direction", "Layout", "Adobe CS"], grad: "linear-gradient(135deg, #0B5159, #06292C)", img: "assets/case04.png"
  }
];

function Work() {
  const [offset, setOffset] = React.useState(0);
  const twRef = React.useRef(1600);
  React.useEffect(() => {
    const measure = () => { const t = document.querySelector(".case-track"); if (t) twRef.current = t.getBoundingClientRect().width; };
    measure();
    window.addEventListener("resize", measure);
    const id = setTimeout(measure, 400);
    return () => { window.removeEventListener("resize", measure); clearTimeout(id); };
  }, []);
  const nudge = (dir) => {
    setOffset((o) => {
      const cell = document.querySelector(".case-cell");
      const step = cell ? cell.getBoundingClientRect().width + 38 : 460;
      const lim = twRef.current;
      let n = o - dir * step;
      if (n > lim) n = lim;
      if (n < -lim) n = -lim;
      return n;
    });
  };
  const cells = (key) => CASES.map((c) => <div className="case-cell" key={key + c.n}><BrowserCard c={c} /></div>);
  return (
    <section id="work" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="wrap">
        <SectionHead index="01 / CASES" tag="Selected projects" title={<React.Fragment>Projects built to show <span className="ink-grad">how I think.</span></React.Fragment>}
          sub="Four self-directed projects — strategy, media, the market read, and the craft. A preview here; full studies on click." />
      </div>
      <div className="case-rail" data-reveal style={{ marginTop: 52 }}>
        <button className="case-arrow case-arrow-l" onClick={() => nudge(-1)} aria-label="Scroll to previous projects"><i data-lucide="chevron-left" /></button>
        <div className="case-viewport">
          <div className="case-shift" style={{ transform: `translateX(${offset}px)` }}>
            <div className="case-flow">
              <div className="case-track">{cells("a")}</div>
              <div className="case-track" aria-hidden="true">{cells("b")}</div>
              <div className="case-track" aria-hidden="true">{cells("c")}</div>
            </div>
          </div>
        </div>
        <button className="case-arrow case-arrow-r" onClick={() => nudge(1)} aria-label="Scroll to next projects"><i data-lucide="chevron-right" /></button>
      </div>
    </section>
  );
}

function About() {
  const skills = ["Brand Management", "Consumer Insight", "Go-to-Market", "Integrated Campaigns", "Creative Briefing", "Cultural Strategy", "Business Analysis", "Performance Reporting"];
  return (
    <section id="about" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(32px,5vw,72px)", alignItems: "center" }}>
        <div data-reveal style={{ position: "relative" }}>
          <div className="glass" style={{ padding: 14, borderRadius: 22 }}>
            <div style={{ position: "relative", borderRadius: 14, overflow: "hidden", aspectRatio: "1/1" }}>
              <img src="assets/about-headshot.jpg" alt="Amreen Shezan" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 22%" }} />
              <VectorPad />
              <div style={{ position: "absolute", bottom: 12, left: 14, fontFamily: "var(--font-crt)", fontSize: 22, color: "var(--neon-celadon)", zIndex: 7, pointerEvents: "none" }}>ID · AMREEN_S</div>
              <CornerFrame color="rgba(165,207,161,0.6)" />
            </div>
          </div>
        </div>
        <div>
          <SectionHead index="04 / ABOUT" tag="The strategist" title={<React.Fragment>Insight first. <span className="ink-grad">Always.</span></React.Fragment>} />
          <p data-reveal style={{ "--reveal-delay": "80ms", marginTop: 24, fontSize: "var(--fs-lead)", fontWeight: "var(--fw-light)", color: "var(--t-bright)", lineHeight: 1.6 }}>
            I&rsquo;m a brand &amp; creative strategist who turns consumer insight into work that moves people and the numbers.
          </p>
          <p data-reveal style={{ "--reveal-delay": "120ms", marginTop: 16, color: "var(--t-body)", fontWeight: "var(--fw-light)", lineHeight: 1.75 }}>
            I&rsquo;ve always been deeply curious about the world around me, and once I realized marketing was woven into everything, obvious or not, that curiosity turned into passion. I wanted to understand people: what moves them, what frustrates them, what they&rsquo;re searching for. That&rsquo;s what draws me to brand strategy. I believe every brand tells a story, and I love uncovering the data-driven insight that becomes its plot, turning human pain points into solutions, and solutions into narratives that people connect with.
          </p>
          <div data-reveal style={{ "--reveal-delay": "200ms", marginTop: 22, display: "flex", gap: 18, flexWrap: "wrap", alignItems: "center" }}>
            <span className="hud hud-dim" style={{ fontSize: "0.66rem" }}>EXPERIENCE</span>
            <span className="hud" style={{ fontSize: "0.72rem", color: "var(--neon-celadon)" }}>The Kitchen, Kraft Heinz</span>
            <span className="hud hud-dim" style={{ fontSize: "0.66rem" }}>·</span>
            <span className="hud" style={{ fontSize: "0.72rem", color: "var(--neon-celadon)" }}>Pigeon Brands</span>
            <span className="hud hud-dim" style={{ fontSize: "0.66rem" }}>·</span>
            <span className="hud" style={{ fontSize: "0.72rem", color: "var(--neon-celadon)" }}>Above Foods</span>
          </div>
          <div data-reveal style={{ "--reveal-delay": "240ms", marginTop: 24, display: "flex", flexWrap: "wrap", gap: 10 }}>
            {skills.map((s) => (
              <span key={s} className="skill-tag">{s}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" style={{ paddingBlock: "var(--section-y)" }}>
      <div className="wrap">
        <div className="glass" data-reveal style={{ padding: "clamp(34px, 5vw, 72px)", borderRadius: 28, overflow: "hidden", position: "relative" }}>
          <CornerFrame color="var(--hairline-2)" />
          <div style={{ position: "absolute", inset: 0, background: "radial-gradient(900px 400px at 90% 0%, rgba(40,150,184,0.16), transparent 60%)", pointerEvents: "none" }} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.3fr 0.7fr", gap: 40, alignItems: "center" }}>
            <div>
              <span className="hud" style={{ color: "var(--neon-blue)", fontSize: "1.05rem", letterSpacing: "0.14em" }}>05 / CONTACT</span>
              <h2 className="display" style={{ fontSize: "clamp(2.4rem, 5vw, 4.4rem)", marginTop: 18 }}>
                Let&rsquo;s make something <span className="ink-grad">that moves.</span>
              </h2>
              <p style={{ marginTop: 20, color: "var(--t-body)", fontWeight: "var(--fw-light)", fontSize: "var(--fs-lead)", lineHeight: 1.6, maxWidth: 480 }}>
                Open to Associate Brand Manager and Creative Strategist roles. Let&rsquo;s talk.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <a href="mailto:amreenshezan@gmail.com" style={{ textDecoration: "none" }}>
                <div className="contact-link">
                  <i data-lucide="mail" />
                  <div>
                    <div className="hud hud-dim" style={{ fontSize: "0.65rem" }}>EMAIL</div>
                    <div style={{ color: "var(--t-bright)", fontWeight: "var(--fw-semibold)", fontSize: "0.98rem" }}>amreenshezan@gmail.com</div>
                  </div>
                  <i data-lucide="arrow-up-right" style={{ marginLeft: "auto", color: "var(--t-dim)" }} />
                </div>
              </a>
              <a href="https://www.linkedin.com/in/amreenshezan/" target="_blank" rel="noopener" style={{ textDecoration: "none" }}>
                <div className="contact-link">
                  <i data-lucide="external-link" />
                  <div>
                    <div className="hud hud-dim" style={{ fontSize: "0.65rem" }}>LINKEDIN</div>
                    <div style={{ color: "var(--t-bright)", fontWeight: "var(--fw-semibold)", fontSize: "0.98rem" }}>in/amreenshezan</div>
                  </div>
                  <i data-lucide="arrow-up-right" style={{ marginLeft: "auto", color: "var(--t-dim)" }} />
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const go = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" }); };
  return (
    <footer style={{ borderTop: "1px solid var(--hairline)", marginTop: "var(--section-y)" }}>
      <div className="wrap" style={{ paddingBlock: 40, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
        <div className="nav-mark" style={{ fontSize: "1.4rem" }}>Amreen Shezan<span className="dot">.</span></div>
        <div style={{ display: "flex", gap: 26, flexWrap: "wrap" }}>
          {[["companies", "Brands"], ["toolkit", "Tools"], ["work", "Cases"], ["about", "About"], ["contact", "Contact"]].map(([id, l]) => (
            <a key={id} onClick={() => go(id)} className="hud hud-dim" style={{ cursor: "pointer", fontSize: "0.72rem" }}>{l}</a>
          ))}
        </div>
        <span className="hud hud-dim" style={{ fontSize: "0.7rem" }}>© 2026 · BUILT IN THE DARK</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Work, About, Contact, Footer });
