/* eslint-disable */
// Arden Turangan — bright restaurant-menu portfolio for CPG marketing roles.
// Order: Cover (name) → About → Case Studies → Experience → Skills → Contact.
// No custom cursor. Recruiter-friendly content.

const { useState, useEffect, useRef } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "bubblegum",
  "layout": "two-column",
  "headerStyle": "diner",
  "stickers": true,
  "marquee": false,
  "coverBg": "pink",
  "nameFont": "caveat"
} /*EDITMODE-END*/;

const THEMES = {
  bubblegum: { bg: "#FFF7E1", surface: "#FFFDF5", ink: "#1A1530",
    a: "#FF3DA0", b: "#FFD23F", c: "#A8E10C", d: "#2547FF" },
  citrus: { bg: "#FFFBE0", surface: "#FFFEFA", ink: "#22180B",
    a: "#FF7A1A", b: "#FFD23F", c: "#A8E10C", d: "#FF3DA0" },
  popsicle: { bg: "#FFE9F1", surface: "#FFFDF5", ink: "#0E1B40",
    a: "#FF3DA0", b: "#00C2A8", c: "#FFD23F", d: "#2547FF" },
  arcade: { bg: "#0E1B40", surface: "#1A2455", ink: "#FFF7E1",
    a: "#FF3DA0", b: "#FFD23F", c: "#A8E10C", d: "#00C2A8" }
};

function ThemeStyle({ theme }) {
  const t = THEMES[theme] || THEMES.bubblegum;
  return (
    <style>{`
      .menu {
        --bg: ${t.bg}; --paper: ${t.surface}; --ink: ${t.ink};
        --pink: ${t.a}; --yellow: ${t.b}; --lime: ${t.c}; --cobalt: ${t.d};
        background: ${t.bg}; color: ${t.ink};
      }
      .menu .placeholder { border-color: ${t.ink}; }
    `}</style>);

}

function useReveal(rootRef) {
  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {e.target.classList.add("in");io.unobserve(e.target);}
        }
      }, { threshold: 0.12, root }
    );
    root.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, [rootRef]);
}

function Marquee({ items }) {
  const row = [...items, ...items];
  return (
    <div className="menu-marquee">
      <div className="marquee">
        <div className="marquee__track">
          {row.map((t, i) => <span key={i} className="menu-marquee__item f-display">{t}</span>)}
        </div>
      </div>
    </div>);

}

function SunnySideEgg({ className = "" }) {
  // Wobbly, hand-drawn sunny-side-up egg
  return (
    <svg className={`egg ${className}`} viewBox="0 0 240 200" aria-hidden="true">
      {/* white */}
      <path
        d="M50,110 C30,80 60,40 100,38 C130,36 140,60 165,55 C200,48 225,80 215,120 C208,150 175,170 140,165 C115,162 105,150 80,155 C50,162 35,140 50,110 Z"
        fill="#FFFDF5" stroke="#1A1530" strokeWidth="3" strokeLinejoin="round" />
      
      {/* yolk */}
      <circle cx="135" cy="105" r="38" fill="#FFC83D" stroke="#1A1530" strokeWidth="3" />
      {/* yolk highlight */}
      <ellipse cx="123" cy="93" rx="11" ry="7" fill="#FFFDF5" opacity="0.9" />
    </svg>);

}

function Cover({ bg, nameFont }) {
  return (
    <section className={`cover-soft cover-soft--${bg} cover-soft--name-${nameFont}`}>
      <SunnySideEgg className="cover-soft__egg cover-soft__egg--tl" />

      <div className="cover-soft__inner">
        <span className="cover-soft__hello">hi, i'm</span>
        <h1 className="cover-soft__name">
          <span className="cover-soft__first">arden</span>
          <span className="cover-soft__last">turangan.</span>
        </h1>
      </div>
    </section>);

}

function About() {
  return (
    <section id="about" className="menu-about">
      <div className="menu-about__grid">
        {/* LEFT — portrait */}
        <div className="menu-about__portrait reveal" />

        {/* RIGHT — bio */}
        <div className="menu-about__bio reveal">
          <h2 className="menu-about__title">hi, i'm arden!</h2>
          <p className="menu-about__tagline">runner, dog mom, serial foodie…</p>
          <p>i spent the last year living and working in manila, philippines — building go-to-market campaigns for a fintech startup, creating content, learning tagalog, and discovering that a ₱5 pandesal from a street cart is truly one of the greatest things in the world.

          </p>
          <p>
            these days i spend my time on market research, creative direction, and building a brand that consumers actually trust. off the clock i travel wherever i can, run marathons i'm not ready for, and spend more time in grocery stores than i probably should.
          </p>
          <p className="menu-about__meet" style={{ fontFamily: "Caveat" }}>it's nice to meet you!</p>

          <div className="menu-about__facts">
            <div className="menu-about__fact">
              <div className="menu-about__fact-k" style={{ fontFamily: "Inter" }}>born &amp; raised</div>
              <div className="menu-about__fact-v" style={{ padding: "0px" }}>dallas, tx</div>
            </div>
            <div className="menu-about__fact">
              <div className="menu-about__fact-k" style={{ fontFamily: "Inter" }}>coffee order</div>
              <div className="menu-about__fact-v">iced almond milk latte</div>
            </div>
            <div className="menu-about__fact">
              <div className="menu-about__fact-k" style={{ fontFamily: "Inter" }}>favorite trip</div>
              <div className="menu-about__fact-v">tokyo, japan</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function CaseArt({ kind }) {
  // Hand-drawn-feeling SVG illustrations per case study.
  if (kind === "fishwife") {
    return (
      <svg className="case-art" viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden>
        {/* deep navy bg */}
        <rect width="320" height="240" fill="#0E1B40" />
        {/* tiny stars/sparkles pattern */}
        <g fill="#FFD23F" opacity="0.55">
          {Array.from({ length: 6 }).map((_, r) =>
          Array.from({ length: 8 }).map((_, c) =>
          <circle key={`${r}-${c}`} cx={20 + c * 38} cy={18 + r * 38} r="1.4" />
          )
          )}
        </g>
        {/* tin can — oval top */}
        <g transform="translate(60,55)">
          {/* lid (silver) */}
          <ellipse cx="100" cy="14" rx="92" ry="14" fill="#E8E6DA" stroke="#0E1B40" strokeWidth="3.5" />
          {/* body */}
          <path d="M8,14 L8,118 Q8,138 100,138 Q192,138 192,118 L192,14" fill="#FF5147" stroke="#0E1B40" strokeWidth="3.5" />
          {/* label band — cream */}
          <rect x="8" y="36" width="184" height="76" fill="#F7F0DC" stroke="#0E1B40" strokeWidth="3.5" />
          {/* yellow stripe top + bottom */}
          <rect x="8" y="36" width="184" height="9" fill="#FFD23F" />
          <rect x="8" y="103" width="184" height="9" fill="#FFD23F" />
          {/* fishwife wordmark */}
          <text x="100" y="68" textAnchor="middle" fontFamily="Lobster, cursive" fontSize="22" fill="#FF5147">fishwife</text>
          <text x="100" y="86" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8.5" letterSpacing="0.22em" fill="#0E1B40">SMOKED · WILD · BOLD</text>
          {/* fish illustration */}
          <g transform="translate(58,92)">
            <path d="M0,5 q12,-7 28,0 q-3,3 -8,3 q-1,3 -5,3 q-3,-1 -2,-3 q-7,0 -13,-3 z" fill="#0E1B40" />
            <circle cx="22" cy="4" r="1.2" fill="#FFD23F" />
          </g>
          <g transform="translate(108,93)">
            <path d="M0,5 q12,-7 28,0 q-3,3 -8,3 q-1,3 -5,3 q-3,-1 -2,-3 q-7,0 -13,-3 z" fill="#0E1B40" />
            <circle cx="22" cy="4" r="1.2" fill="#FFD23F" />
          </g>
          {/* pull tab */}
          <ellipse cx="100" cy="6" rx="22" ry="5" fill="none" stroke="#0E1B40" strokeWidth="2.5" />
          <rect x="86" y="-2" width="28" height="10" rx="3" fill="#FFD23F" stroke="#0E1B40" strokeWidth="2.5" />
        </g>
        {/* sparkles */}
        <g fill="#FFD23F">
          <path d="M30,40 l3,7 l7,3 l-7,3 l-3,7 l-3,-7 l-7,-3 l7,-3 z" />
          <path d="M286,200 l2,5 l5,2 l-5,2 l-2,5 l-2,-5 l-5,-2 l5,-2 z" />
        </g>
      </svg>);

  }
  if (kind === "spoon") {
    return (
      <svg className="case-art" viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden>
        <rect width="320" height="240" fill="#FFE9A8" />
        {/* milk splashes */}
        <g fill="#FFFDF5" stroke="#1A1530" strokeWidth="2.5">
          <circle cx="44" cy="38" r="10" />
          <circle cx="288" cy="58" r="8" />
          <circle cx="276" cy="186" r="12" />
          <circle cx="36" cy="196" r="9" />
        </g>
        {/* bowl */}
        <g transform="translate(40,76)">
          <ellipse cx="120" cy="22" rx="118" ry="22" fill="#FF8FB6" stroke="#1A1530" strokeWidth="3.5" />
          <path d="M2,22 Q14,118 120,124 Q226,118 238,22" fill="#FF7AA2" stroke="#1A1530" strokeWidth="3.5" />
          {/* milk surface */}
          <ellipse cx="120" cy="22" rx="106" ry="16" fill="#FFFDF5" stroke="#1A1530" strokeWidth="2.5" />
          {/* cereal pieces — rings + stars */}
          <g fill="#FFD23F" stroke="#1A1530" strokeWidth="2">
            <circle cx="60" cy="22" r="9" />
            <circle cx="60" cy="22" r="3.5" fill="#FFFDF5" />
            <circle cx="158" cy="18" r="9" />
            <circle cx="158" cy="18" r="3.5" fill="#FFFDF5" />
            <circle cx="190" cy="26" r="8" />
            <circle cx="190" cy="26" r="3" fill="#FFFDF5" />
            <circle cx="92" cy="28" r="7" />
            <circle cx="92" cy="28" r="2.5" fill="#FFFDF5" />
          </g>
          <g fill="#A8E10C" stroke="#1A1530" strokeWidth="2">
            <path d="M124,12 l4,8 l8,1 l-6,5 l2,8 l-8,-4 l-8,4 l2,-8 l-6,-5 l8,-1 z" />
          </g>
          {/* spoon */}
          <g transform="translate(186,-32) rotate(28)">
            <rect x="0" y="0" width="10" height="80" rx="5" fill="#FFFDF5" stroke="#1A1530" strokeWidth="2.5" />
            <ellipse cx="5" cy="-2" rx="22" ry="14" fill="#FFFDF5" stroke="#1A1530" strokeWidth="2.5" />
          </g>
        </g>
      </svg>);

  }
  if (kind === "flybyjing") {
    return (
      <svg className="case-art" viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden>
        {/* hot pink/red bg — Fly By Jing's signature */}
        <rect width="320" height="240" fill="#E63946" />
        {/* chili crisp specks */}
        <g fill="#1A1530" opacity="0.35">
          {Array.from({ length: 7 }).map((_, r) =>
          Array.from({ length: 10 }).map((_, c) =>
          <circle key={`${r}-${c}`} cx={16 + c * 30 + r % 2 * 8} cy={20 + r * 28} r="1.8" />
          )
          )}
        </g>
        {/* squiggly chili pepper top-left */}
        <g transform="translate(28,28) rotate(-25)">
          <path d="M-2,-2 Q4,-12 14,-8" fill="none" stroke="#A8E10C" strokeWidth="3" strokeLinecap="round" />
        </g>
        {/* glass jar — center */}
        <g transform="translate(96,40)">
          {/* lid (gold) */}
          <rect x="14" y="0" width="100" height="22" rx="3" fill="#FFD23F" stroke="#1A1530" strokeWidth="3.5" />
          <line x1="14" y1="11" x2="114" y2="11" stroke="#1A1530" strokeWidth="1.5" opacity="0.5" />
          {/* jar body — translucent cream */}
          <rect x="6" y="22" width="116" height="148" rx="6" fill="#FFFDF5" stroke="#1A1530" strokeWidth="3.5" />
          {/* chili crisp inside (top half) */}
          <path d="M9,46 L119,46 L119,166 Q64,176 9,166 Z" fill="#C8341E" />
          {/* specks inside */}
          <g fill="#1A1530">
            <circle cx="28" cy="64" r="2" /><circle cx="48" cy="78" r="2.4" />
            <circle cx="72" cy="58" r="2" /><circle cx="96" cy="74" r="2.2" />
            <circle cx="40" cy="106" r="2" /><circle cx="80" cy="118" r="2.4" />
            <circle cx="100" cy="98" r="2" /><circle cx="58" cy="142" r="2.2" />
          </g>
          {/* label band */}
          <rect x="14" y="74" width="100" height="56" fill="#FFD23F" stroke="#1A1530" strokeWidth="3" />
          <text x="64" y="96" textAnchor="middle" fontFamily="Lobster, cursive" fontSize="18" fill="#1A1530">fly by jing</text>
          <line x1="22" y1="104" x2="106" y2="104" stroke="#1A1530" strokeWidth="1.5" />
          <text x="64" y="120" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="0.18em" fill="#1A1530">SICHUAN CHILI</text>
        </g>
        {/* flame icon top-right */}
        <g transform="translate(264,30)">
          <path d="M10,0 Q18,10 14,18 Q22,16 22,28 Q22,40 10,42 Q-2,40 -2,28 Q-2,18 6,12 Q10,6 10,0 Z" fill="#FFD23F" stroke="#1A1530" strokeWidth="2.5" />
        </g>
        {/* lil sparkle */}
        <path d="M40,200 l3,7 l7,3 l-7,3 l-3,7 l-3,-7 l-7,-3 l7,-3 z" fill="#FFD23F" />
      </svg>);

  }
  if (kind === "poppi") {
    return (
      <svg className="case-art" viewBox="0 0 320 240" preserveAspectRatio="xMidYMid slice" aria-hidden>
        {/* coral peach bg — Poppi's signature */}
        <rect width="320" height="240" fill="#FF8FA3" />
        {/* bubbles bg */}
        <g fill="#FFFDF5" opacity="0.4" stroke="#1A1530" strokeWidth="1.5">
          <circle cx="40" cy="44" r="6" />
          <circle cx="284" cy="58" r="9" />
          <circle cx="50" cy="200" r="5" />
          <circle cx="276" cy="194" r="7" />
          <circle cx="22" cy="118" r="4" />
        </g>
        {/* sun rays — happy hour glow */}
        <g transform="translate(160,120)" stroke="#FFD23F" strokeWidth="3" strokeLinecap="round" opacity="0.7">
          <line x1="0" y1="-92" x2="0" y2="-78" />
          <line x1="64" y1="-66" x2="54" y2="-56" />
          <line x1="92" y1="0" x2="78" y2="0" />
          <line x1="64" y1="66" x2="54" y2="56" />
          <line x1="-64" y1="-66" x2="-54" y2="-56" />
          <line x1="-92" y1="0" x2="-78" y2="0" />
          <line x1="-64" y1="66" x2="-54" y2="56" />
        </g>
        {/* soda can */}
        <g transform="translate(112,30)">
          {/* top rim */}
          <ellipse cx="48" cy="6" rx="44" ry="6" fill="#D9D5C8" stroke="#1A1530" strokeWidth="3" />
          {/* body */}
          <path d="M4,6 L4,166 Q4,178 48,178 Q92,178 92,166 L92,6 Z" fill="#FFFDF5" stroke="#1A1530" strokeWidth="3.5" />
          {/* lid detail */}
          <ellipse cx="48" cy="6" rx="44" ry="6" fill="none" stroke="#1A1530" strokeWidth="3" />
          <ellipse cx="48" cy="6" rx="36" ry="3.5" fill="none" stroke="#1A1530" strokeWidth="1.5" opacity="0.5" />
          {/* tab */}
          <ellipse cx="48" cy="4" rx="12" ry="3" fill="#D9D5C8" stroke="#1A1530" strokeWidth="2" />
          {/* label band — bright pink */}
          <rect x="4" y="40" width="88" height="100" fill="#FF5C8A" stroke="#1A1530" strokeWidth="3" />
          {/* poppi wordmark */}
          <text x="48" y="78" textAnchor="middle" fontFamily="Bagel Fat One, Lobster, cursive" fontSize="22" fill="#FFFDF5">poppi</text>
          {/* underline doodle */}
          <path d="M22,84 q14,4 26,0 q12,-4 24,2" stroke="#FFD23F" strokeWidth="3" fill="none" strokeLinecap="round" />
          {/* flavor */}
          <text x="48" y="108" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="0.18em" fill="#FFFDF5">PREBIOTIC</text>
          <text x="48" y="122" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="0.18em" fill="#FFFDF5">SODA · 12oz</text>
          {/* highlight */}
          <path d="M14,30 Q12,90 16,160" stroke="#FFFDF5" strokeWidth="3" opacity="0.55" fill="none" />
        </g>
        {/* lemon slice — happy hour vibe */}
        <g transform="translate(40,156)">
          <circle cx="20" cy="20" r="20" fill="#FFD23F" stroke="#1A1530" strokeWidth="2.5" />
          <circle cx="20" cy="20" r="14" fill="#FFFDF5" stroke="#1A1530" strokeWidth="1.5" />
          <line x1="20" y1="6" x2="20" y2="34" stroke="#1A1530" strokeWidth="1.2" />
          <line x1="6" y1="20" x2="34" y2="20" stroke="#1A1530" strokeWidth="1.2" />
          <line x1="10" y1="10" x2="30" y2="30" stroke="#1A1530" strokeWidth="1.2" />
          <line x1="10" y1="30" x2="30" y2="10" stroke="#1A1530" strokeWidth="1.2" />
        </g>
      </svg>);

  }
  return null;
}

function MenuItem({ p, big = false }) {
  return (
    <a href={p.caseUrl || `case-study.html?p=${p.id}`} className={`menu-item menu-item--rich reveal`}>
      <div className={`menu-item__art menu-item__art--illustrated`}>
        <CaseArt kind={p.art} />
      </div>
      <div className="menu-item__main">
        <div className="menu-item__brand f-mono">{p.price} · {p.brand}</div>
        <div className="menu-item__head">
          <h3 className="menu-item__name f-serif">{p.name}</h3>
        </div>
        <p className="menu-item__desc f-body">{p.summary}</p>
        <div className="menu-item__foot">
          <div className="menu-item__ingredients f-mono">
            {(p.ingredients || []).map((ing, i, arr) =>
            <React.Fragment key={ing}>
                <span>{ing}</span>{i < arr.length - 1 && <span className="dot">·</span>}
              </React.Fragment>
            )}
          </div>
          <span className="menu-item__cta f-mono">read the case →</span>
        </div>
      </div>
    </a>);

}

function MenuSection({ id, label, script, title, items, layout, stickers, accent }) {
  return (
    <section id={id} className={`menu-section menu-section--${layout} menu-section--${accent}`}>
      <header className="menu-section__head menu-section__head--cases">
        <div className="menu-section__head-left">
          <span className="menu-section__menu-eyebrow f-mono">— brands that changed the aisle —</span>
          <h2 className="menu-section__title menu-section__title--cases">{title}</h2>
        </div>
      </header>

      <div className={`menu-section__body menu-section__body--${layout}`}>
        {items.map((p, i) =>
        <MenuItem key={p.id} p={p} big={layout === "feature" && i === 0} />
        )}
      </div>

      {stickers &&
      <span className={`sticker menu-section__sticker menu-section__sticker--${accent}`}>CERTIFIED<br />FRESH</span>
      }
    </section>);

}

function MyCafe() {
  // "Food for Thought" — a chef's tasting menu of three essays.
  const articles = [
  {
    n: "one",
    title: "The Grocery Aisle Has a Main Character Now",
    veg: "tomato",
    href: "article-grocery-aisle.html"
  },
  {
    n: "two",
    title: "AI Gave Every Brand a Marketing Team. Now What?",
    veg: "egg",
    href: "article-ai-marketing.html"
  },
  {
    n: "three",
    title: "The Anatomy of a Living Brand",
    veg: "orange",
    href: "article-living-brand.html"
  }];

  return (
    <section id="cafe" className="fft">
      <header className="fft__head">
        <h2 className="f-display fft__title">food for thought</h2>
      </header>

      <div className="fft__counter">
        {articles.map((a) =>
        <a key={a.n} href={a.href} className={`fft-course fft-course--${a.veg}`}>
            <div className="fft-course__veg">
              <Veg kind={a.veg} />
            </div>
            <div className="fft-course__line" aria-hidden />
            <span className="f-mono fft-course__label">article {a.n}</span>
            <h3 className="f-serif fft-course__title">{a.title}</h3>
            <span className="f-serif fft-course__cta"><span aria-hidden>—</span> click me to read! <span aria-hidden>—</span></span>
          </a>
        )}
      </div>
    </section>);

}

/* Hand-drawn SVG ingredients — same line vocabulary as the rest of the page. */
function Veg({ kind }) {
  const stroke = "#1A1530";
  const sw = 3;
  // All three illustrations share the same viewBox (240x200) so they sit on
  // the same baseline visually.
  if (kind === "tomato") {
    // Wide, squat heirloom-style tomato
    return (
      <svg viewBox="0 0 240 200" width="100%" height="100%" aria-hidden>
        {/* body — wide & squat */}
        <path d="M30 110 Q26 56 96 50 Q120 46 144 50 Q214 56 210 110 Q214 170 120 178 Q26 170 30 110 Z"
        fill="#FF5A4D" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" />
        {/* segment hint */}
        <path d="M120 60 Q116 110 120 176" fill="none" stroke={stroke} strokeWidth="1.5" opacity="0.18" />
        {/* highlight */}
        <path d="M58 88 Q72 70 96 64" fill="none" stroke="#FFFDF5" strokeWidth="5" strokeLinecap="round" opacity="0.9" />
        {/* freckles */}
        <circle cx="160" cy="116" r="2.4" fill={stroke} opacity="0.4" />
        <circle cx="92" cy="138" r="2" fill={stroke} opacity="0.4" />
        <circle cx="138" cy="146" r="1.8" fill={stroke} opacity="0.35" />
        {/* stem cup */}
        <path d="M100 54 Q120 46 140 54" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" />
        {/* leaves — five-pointed star calyx */}
        <g fill="#5A8A3A" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" strokeLinecap="round">
          <path d="M120 50 Q92 28 76 36 Q82 56 104 60 Z" />
          <path d="M120 50 Q148 28 164 36 Q158 56 136 60 Z" />
          <path d="M120 50 Q104 24 96 12 Q116 18 122 36 Z" />
          <path d="M120 50 Q136 24 144 12 Q124 18 120 36 Z" />
        </g>
        {/* stalk */}
        <path d="M120 14 Q124 4 118 -2" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" />
      </svg>);

  }
  if (kind === "egg") {
    // Sunny-side-up: organic blobby white with a yolk in the middle
    return (
      <svg viewBox="0 0 240 200" width="100%" height="100%" aria-hidden>
        {/* white — rounder shape with two soft curves so it still reads as a fried egg */}
        <path d="M50 110
                 Q44 60 110 56
                 Q150 50 180 70
                 Q216 88 210 122
                 Q204 168 150 168
                 Q90 172 60 152
                 Q34 138 50 110 Z"
























































































































        fill="#FFFDF5" stroke={stroke} strokeWidth={sw} strokeLinejoin="round" />
        {/* faint white-on-white shadow so white reads against cream bg */}
        <path d="M60 102 Q72 88 92 90" fill="none" stroke={stroke} strokeWidth="1.5" opacity="0.15" />
        {/* yolk */}
        <circle cx="120" cy="108" r="34" fill="#FFC641" stroke={stroke} strokeWidth={sw} />
        {/* yolk highlight */}
        <path d="M104 96 Q112 86 124 86" fill="none" stroke="#FFFDF5" strokeWidth="4" strokeLinecap="round" opacity="0.95" />
      </svg>);

  }
  if (kind === "orange") {
    // Cross-section of an orange — segments visible
    return (
      <svg viewBox="0 0 240 200" width="100%" height="100%" aria-hidden>
        {/* outer rind */}
        <circle cx="120" cy="108" r="88" fill="#FF8A1F" stroke={stroke} strokeWidth={sw} />
        {/* white pith */}
        <circle cx="120" cy="108" r="80" fill="#FFFDF5" stroke={stroke} strokeWidth="2" />
        {/* flesh */}
        <circle cx="120" cy="108" r="74" fill="#FFB347" stroke="none" />
        {/* segment dividers — 8 wedges */}
        <g stroke="#FFFDF5" strokeWidth="3" fill="none" strokeLinecap="round">
          <line x1="120" y1="34" x2="120" y2="182" />
          <line x1="46" y1="108" x2="194" y2="108" />
          <line x1="68" y1="56" x2="172" y2="160" />
          <line x1="172" y1="56" x2="68" y2="160" />
        </g>
        {/* center pulp dot */}
        <circle cx="120" cy="108" r="6" fill="#FFFDF5" stroke={stroke} strokeWidth="2" />
        {/* a few seeds in segments */}
        <g fill="#FFFDF5" stroke={stroke} strokeWidth="1.5">
          <ellipse cx="120" cy="68" rx="3" ry="5" />
          <ellipse cx="156" cy="100" rx="5" ry="3" />
          <ellipse cx="120" cy="148" rx="3" ry="5" />
          <ellipse cx="84" cy="116" rx="5" ry="3" />
        </g>
        {/* outer rind highlight */}
        <path d="M58 76 Q72 56 96 50" fill="none" stroke="#FFFDF5" strokeWidth="4" strokeLinecap="round" opacity="0.85" />
      </svg>);

  }
  return null;
}

function Experience() {
  const roles = [
  { yr: "2025 – 2026", role: "Market Strategy Consultant", co: "Tonik Digital Bank", loc: "Manila, Philippines",
    note: 'i focus on brand positioning, go-to-market execution, and process optimization for one of the first <em>fully AI-powered digital banks</em>&nbsp; in Southeast Asia.',
    now: true },
  { yr: "2024 – 2025", role: "Business Operations Lead", co: "Alfalfa", loc: "Los Angeles, CA, USA",
    note: "led product collab rollouts &amp; menu partnerships, designed a multi-location expansion blueprint, and converted community pop-ups into a scalable market-testing channel." },
  { yr: "2024", role: "Brand Experience & Events Coordinator", co: "The Salty Donut", loc: "Austin, TX, USA",
    note: "represented the brand at launch events, directed catering operations, managed logistics, and developed social media content to support promotional campaigns." },
  { yr: "2023 – 2024", role: "Investment Services Associate", co: "Charles Schwab (Internship)", loc: "Austin, TX, USA",
    note: "guided hundreds of clients through the TD Ameritrade → Schwab platform migration, managing account transfers, portfolio adjustments, and platform onboarding." },
  { yr: "2023", role: "Junior Pricing Analyst", co: "BNSF Railway (Internship)", loc: "Fort Worth, TX, USA",
    note: "supported a modernized pricing infrastructure from legacy zone-based models to mileage-based, audited high-volume freight portfolios, and stress-tested new cost structures across hundreds of contracts." },
  { yr: "2021 – 2023", role: "Creative Marketing Assistant", co: "La Patisserie", loc: "Austin, TX, USA",
    note: "designed pastry case displays, created social media content, managed event coordination and local partnerships, and supported seasonal campaigns for an artisan French bakery." }];

  return (
    <section id="experience" className="menu-experience menu-path">
      <header className="menu-section__head">
        <div className="menu-section__head-left">
          <h2 className="menu-section__title path-title" style={{ fontFamily: "Caveat", fontSize: "40px", padding: "0px 0px 6px" }}>the timeline</h2>
        </div>
      </header>

      <div className="path-timeline">
        {roles.map((r) =>
        <div key={r.co + r.yr} className={"tl-entry reveal" + (r.now ? " tl-entry--now" : "")}>
            <div className="tl-entry__yr f-mono">{r.yr}</div>
            <div className="tl-entry__head">
              <h3 className="tl-entry__role f-serif">{r.role}</h3>
              <div className="tl-entry__co f-body">
                <span>{r.co}</span><span className="dot">•</span><span>{r.loc}</span>
              </div>
            </div>
            <p className="tl-entry__note f-body" dangerouslySetInnerHTML={{ __html: r.note }} />
          </div>
        )}

        <div className="tl-chapter tl-chapter--edu reveal">
          <div className="tl-chapter__yr f-mono">2020 — 2024</div>
          <div className="tl-chapter__label">
            <span className="kicker f-mono">how i got here</span>
            <span className="f-script">education</span>
          </div>
          <div className="edu-list">
            <div className="edu edu--primary">
              <div className="edu__deg f-serif">B.A. in Business Economics</div>
              <div className="edu__school f-body">
                <span className="ut">The University of Texas at Austin</span> · Finance concentration
              </div>
              <div className="edu__meta f-body"><b>Honors:</b> Magna Cum Laude · Dean's Honor List (2020–2024) · Economics Honor Society Academic Mentor</div>
              <div className="edu__meta f-body"><b>Activities:</b> Texas Economics Association · Texas Global Scholars · Asian Business Student Association</div>
            </div>
            <div className="edu edu--secondary">
              <div className="edu__deg f-serif">Student Exchange Program — Fall 2022</div>
              <div className="edu__school f-body">
                <span className="bocconi">Bocconi University</span> <span className="loc">— Milan, Italy</span>
              </div>
              <div className="edu__meta f-body">Business Strategy, Economics, and Managerial Accounting</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Scrapbook() {
  const places = [
  { id: "alfalfa",
    name: "Alfalfa",
    tag: "Los Angeles, CA",
    accent: "lime",
    photos: [
    { src: "assets/scrapbook/alfalfa-1.jpg?v=2", label: "alfalfa · 01" },
    { src: "assets/scrapbook/alfalfa-2.jpg?v=2", label: "alfalfa · 02" },
    { src: "assets/scrapbook/alfalfa-3.jpg?v=2", label: "alfalfa · 03" },
    { src: "assets/scrapbook/alfalfa-4.jpg?v=2", label: "alfalfa · 04" }],

    photoLayout: "quad",
    desc:
    '<b>events:</b> Coachella 2025, Camberito launch event.<br/>' +
    '<b>collabs:</b> The Hidden Opponent, veggiekins matcha, etc.<br/>' +
    '<b>organized:</b> farmstand plates, olive oil tastings, thrift store pop-ups, sunset yoga, &amp; more.' },
  { id: "patisserie",
    name: "La Patisserie",
    tag: "Austin, TX",
    accent: "cobalt",
    photos: [
    { src: "assets/scrapbook/patisserie-1.jpg?v=2", label: "patisserie · 01" },
    { src: "assets/scrapbook/patisserie-2.jpg?v=2", label: "patisserie · 02" },
    { src: "assets/scrapbook/patisserie-4.jpg?v=2", label: "patisserie · 03" },
    { src: "assets/scrapbook/patisserie-3.jpg?v=2", label: "patisserie · 04" }],

    photoLayout: "quad",
    desc:
    '<b>brand collabs:</b> King Florist, Kendra Scott, Baker&apos;s Box.<br/>' +
    '<b>events:</b> dozens of weddings, birthdays, graduations, &amp; celebrations.' },
  { id: "salty",
    name: "The Salty Donut",
    tag: "Austin, TX",
    accent: "yellow",
    photos: [
    { src: "assets/scrapbook/salty-wide.jpg?v=3", label: "salty · wide" },
    { src: "assets/scrapbook/salty-1.jpg?v=2", label: "salty · 01" },
    { src: "assets/scrapbook/salty-2.jpg?v=2", label: "salty · 02" }],

    photoLayout: "wide-top",
    desc:
    'organized 10+ brand activations &amp; community events in Austin, Texas.<br/>' +
    '<b>examples:</b> back-to-school at UT Austin, flower pop-ups (valentine&apos;s day), weekend run club partnerships, &amp; more.' },
  { id: "tonik",
    name: "Tonik Digital Bank",
    tag: "Manila, Philippines",
    accent: "pink",
    photos: [
    { src: "assets/scrapbook/tonik-4.jpg?v=2", label: "tonik · 01" },
    { src: "assets/scrapbook/tonik-2.jpg?v=2", label: "tonik · 02" },
    { src: "assets/scrapbook/tonik-3.jpg?v=2", label: "tonik · 03" },
    { src: "assets/scrapbook/tonik-1.jpg?v=2", label: "tonik · 04" }],

    photoLayout: "quad",
    desc: "holiday campaigns &amp; product launches!",
    pills: [
    { label: "community event recap", url: "https://www.facebook.com/reel/864676579434882", color: "grape" },
    { label: "v-day campaign", url: "https://www.facebook.com/reel/1397474674914337", color: "pink" }] }];


  return (
    <section id="scrapbook" className="menu-scrapbook">
      <header className="menu-section__head menu-scrapbook__head">
        <div className="menu-section__head-left">
          <h2 className="menu-section__title menu-section__title--scrapbook">MY SCRAPBOOK</h2>
        </div>
      </header>

      <div className="scrapbook-grid">
        {places.map((p) =>
        <article key={p.id} className={`scrap-card scrap-card--${p.accent} reveal`}>
            <header className="scrap-card__head">
              <h3 className="f-serif scrap-card__name">{p.name}</h3>
              <span className="scrap-card__tag f-mono">{p.tag}</span>
            </header>

            <div className={`scrap-photos scrap-photos--${p.photoLayout}`}>
              {p.photos.map((ph, i) =>
            <figure key={i} className="scrap-photo">
                  <img
                src={ph.src}
                alt=""
                onError={(e) => {e.currentTarget.style.opacity = '0';}} />

                  <figcaption className="scrap-photo__placeholder f-mono">{ph.label}</figcaption>
                </figure>
            )}
            </div>

            <div className="scrap-card__body">
              <p className="scrap-card__desc f-body" dangerouslySetInnerHTML={{ __html: p.desc }} />

              {p.pills && <div className="scrap-card__pills">
                  {p.pills.map((pill) => <a key={pill.url} href={pill.url} target="_blank" rel="noreferrer" className={`pill pill--${pill.color}`}>
                      {pill.label} <span aria-hidden="true">↗</span>
                    </a>
              )}
                </div>
            }
            </div>
          </article>
        )}
      </div>
    </section>);

}

function Skills() {
  const skills = [
  { name: "content &amp; creative", desc: "Canva, Adobe Photoshop, CapCut, video editing, Figma, copywriting, content workflows, styling.", color: "pink" },
  { name: "growth marketing", desc: "search engine optimization (SEO), paid &amp; organic social, lifecycle, full-funnel.", color: "yellow" },
  { name: "campaigns &amp; events", desc: "event production, activations, multichannel execution, brand collaborations.", color: "lime" },
  { name: "strategy &amp; insights", desc: "consumer research, competitive analysis, brand positioning, market entry.", color: "cobalt" },
  { name: "operations", desc: "Microsoft Office Suite, Claude, Notion, project management, performance tracking.", color: "orange" },
  { name: "analytics", desc: "campaign performance reporting, Google Search Console, forecasting, market segmentation, budgeting.", color: "pink" }];

  return (
    <section id="skills" className="menu-sides">
      <header className="menu-section__head">
        <div className="menu-section__head-left">
          <h2 className="f-display menu-section__title">SKILLS + CONTACT</h2>
        </div>
      </header>

      <div className="menu-sides__grid">
        {skills.map((s) =>
        <div key={s.name} className={`side-tile side-tile--${s.color} reveal`}>
            <span className="side-tile__name f-serif" dangerouslySetInnerHTML={{ __html: s.name }} />
            <span className="side-tile__desc f-body" dangerouslySetInnerHTML={{ __html: s.desc }} />
          </div>
        )}
      </div>

      <div id="contact" className="menu-contact reveal">
        <span className="menu-contact__label f-body">contact</span>
        <a className="menu-contact__email f-serif" href="mailto:ardenturangan@gmail.com">ardenturangan@gmail.com</a>
        <span className="menu-contact__sep" aria-hidden="true">·</span>
        <a className="menu-contact__email f-serif" href="https://www.linkedin.com/in/ardenturangan" target="_blank" rel="noreferrer">LinkedIn</a>
      </div>
    </section>);

}

function Check() {
  return (
    <footer id="contact" className="menu-check">
      <div className="menu-check__paper">
        <div className="menu-check__head">
          <span className="f-display">THE&nbsp;CHECK</span>
          <span className="f-mono">FROM ARDEN · DALLAS</span>
        </div>
        <div className="menu-check__rows">
          <div className="menu-check__row"><span>Brand strategy</span><span className="dots" /><span>↗</span></div>
          <div className="menu-check__row"><span>Growth marketing</span><span className="dots" /><span>↗</span></div>
          <div className="menu-check__row"><span>Positioning &amp; naming</span><span className="dots" /><span>↗</span></div>
          <div className="menu-check__row"><span>GTM, retail &amp; CRM</span><span className="dots" /><span>↗</span></div>
        </div>
        <div className="menu-check__total">
          <span className="f-serif">Let&apos;s talk.</span>
          <span className="f-display">Get in touch.</span>
        </div>

        <div className="menu-check__cta">
          <a className="cta cta--lime" href="mailto:ardenturangan@gmail.com">
            ✉ ardenturangan@gmail.com
          </a>
          <a className="cta cta--cobalt" href="https://www.linkedin.com/" target="_blank" rel="noreferrer">
            LINKEDIN ↗
          </a>
        </div>

        <div className="menu-check__legal f-mono">
          <span>★ Open to CPG roles ★</span>
          <span>© Arden Turangan · Dallas, TX · 2026</span>
          <span>★ Made with care ★</span>
        </div>
      </div>
    </footer>);

}

function PortfolioMenu() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const scope = useRef(null);
  useReveal(scope);

  const projects = window.PORTFOLIO_PROJECTS;

  return (
    <div className={`menu menu--layout-${tweaks.layout} menu--head-${tweaks.headerStyle}`} ref={scope}>
      <ThemeStyle theme={tweaks.theme} />

      <nav className="menu-nav">
        <a href="#top" className="menu-nav__brand f-display">arden</a>
        <div className="menu-nav__links f-mono">
          <a href="#about">ABOUT</a>
          <a href="#work">IDEAS</a>
          <a href="#cafe">ARTICLES</a>
          <a href="#experience">experience</a>
          <a href="#scrapbook">scrapbook</a>
          <a href="#skills">skills + contact</a>
        </div>
      </nav>

      <div id="top" />
      <About />
      {tweaks.marquee && <Marquee items={[
      "★ Open for work ★", "Marketing · Brand · Growth", "★ CPG food & beverage ★",
      "Based in Dallas, TX", "★ ardenturangan@gmail.com ★"]
      } />}

      <MenuSection id="work" label="case studies" script="Four growth plays for brands that deserve more shelf space." title="my campaign ideas"
      items={projects} layout={tweaks.layout} stickers={tweaks.stickers} accent="pink" />

      <MyCafe />

      <Experience />
      <Scrapbook />
      <Skills />

      <TweaksPanel title="Tweaks" placement="bottom-right" defaultOpen={false}>
        <TweakSection title="Color theme">
          <TweakSelect value={tweaks.theme} onChange={(v) => setTweak("theme", v)}
          options={[
          { label: "Bubblegum", value: "bubblegum" },
          { label: "Citrus Stand", value: "citrus" },
          { label: "Popsicle", value: "popsicle" },
          { label: "Arcade (dark)", value: "arcade" }]
          } />
        </TweakSection>
        <TweakSection title="Case-study layout">
          <TweakRadio value={tweaks.layout} onChange={(v) => setTweak("layout", v)}
          options={[
          { label: "Single col", value: "single-column" },
          { label: "Two col", value: "two-column" },
          { label: "Featured", value: "feature" }]
          } />
        </TweakSection>
        <TweakSection title="Name font">
          <TweakSelect value={tweaks.nameFont} onChange={(v) => setTweak("nameFont", v)}
          options={[
          { label: "Recoleta (warm serif)", value: "recoleta" },
          { label: "Fraunces (italic serif)", value: "fraunces" },
          { label: "Quicksand (rounded)", value: "quicksand" },
          { label: "Nunito (soft sans)", value: "nunito" },
          { label: "Sniglet (chunky round)", value: "sniglet" },
          { label: "Caveat (handwritten)", value: "caveat" },
          { label: "Lobster (script)", value: "lobster" },
          { label: "Bagel Fat One (display)", value: "bagel" }]
          } />
        </TweakSection>
        <TweakSection title="Cover background">
          <TweakRadio value={tweaks.coverBg} onChange={(v) => setTweak("coverBg", v)}
          options={[
          { label: "Pink", value: "pink" },
          { label: "Blue", value: "blue" },
          { label: "Cream", value: "cream" }]
          } />
        </TweakSection>
        <TweakSection title="Cover style">
          <TweakRadio value={tweaks.headerStyle} onChange={(v) => setTweak("headerStyle", v)}
          options={[
          { label: "Diner", value: "diner" },
          { label: "Big top", value: "bigtop" },
          { label: "Takeout", value: "takeout" }]
          } />
        </TweakSection>
        <TweakSection title="Decorations">
          <TweakToggle label="Stickers" value={tweaks.stickers} onChange={(v) => setTweak("stickers", v)} />
          <TweakToggle label="Marquee ticker" value={tweaks.marquee} onChange={(v) => setTweak("marquee", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

window.PortfolioMenu = PortfolioMenu;