// page-case-study.jsx — single case study, data-driven from WORK_DETAILS + PROJECTS by ?slug=

const CSCSS = `
.page .cs-hero{ padding:48px 56px 80px; position:relative; }
.page .cs-hero .meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:48px 0 0; border-top:1px solid var(--rule); margin-top:48px; }
.page .cs-hero .meta .l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.page .cs-hero .meta .v{ font-family:'Instrument Serif',serif; font-style:italic; font-size:24px; }
.page .cs-shot{ padding:0 56px 80px; position:relative; }
.page .cs-shot .frame{ border-radius:8px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.5); }
.page .cs-shot img{ width:100%; display:block; }
.page .cs-body{ padding:80px 56px; display:grid; grid-template-columns:1fr 2fr; gap:80px; position:relative; }
.page .cs-body + .cs-body{ padding-top:0; }
.page .cs-body h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; line-height:1; margin:0; }
.page .cs-body p{ font-size:18px; line-height:1.6; margin:0 0 18px; }
.page .cs-body p:last-child{ margin-bottom:0; }
.page .cs-body p strong{ color:var(--terra); font-weight:500; }
.page .cs-band{ background:var(--paper); padding:120px 56px; position:relative; }
.page .cs-band h3{ font-family:'Instrument Serif',serif; font-style:italic; font-size:60px; line-height:1; margin:14px 0 48px; max-width:800px; }
.page .cs-band h3 em{ color:var(--terra); }
.page .cs-band .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.page .cs-band .pic{ aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--bg); }
.page .cs-band .pic img{ width:100%; height:100%; object-fit:cover; }
.page .cs-band .stat .n{ font-family:'Instrument Serif',serif; font-style:italic; font-size:96px; color:var(--terra); line-height:1; }
.page .cs-band .stat .l{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
.page .cs-quote{ padding:120px 56px; text-align:center; max-width:1000px; margin:0 auto; position:relative; }
.page .cs-quote q{ font-family:'Instrument Serif',serif; font-style:italic; font-size:56px; line-height:1.08; quotes:none; letter-spacing:-.02em; }
.page .cs-quote .who{ margin-top:32px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.page .cs-nav{ padding:80px 56px; display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid var(--rule); }
.page .cs-nav a{ display:flex; flex-direction:column; gap:6px; padding:32px; border-radius:8px; background:var(--paper); text-decoration:none; color:inherit; transition:transform .25s; }
.page .cs-nav a:hover{ transform:translateY(-3px); }
.page .cs-nav a.next{ text-align:right; }
.page .cs-nav .l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.page .cs-nav .t{ font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; }

/* ---- SCREEN GALLERY ---- */
.page .cs-screens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.page .cs-screen-frame{
  border-radius:10px; overflow:hidden; position:relative;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.35);
  background:var(--bg);
  transition: transform .3s, box-shadow .3s;
}
.page .cs-screen-frame:hover{ transform:translateY(-6px) rotate(.3deg); box-shadow:0 28px 56px -24px rgba(0,0,0,.45); }
.page .cs-screen-frame .browser-bar{
  height:28px; background:#e8e4d8; display:flex; align-items:center; padding:0 10px; gap:5px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.page .cs-screen-frame .browser-bar .dot{ width:8px; height:8px; border-radius:50%; }
.page .cs-screen-frame .browser-bar .dot.r{ background:#ec6a5e; }
.page .cs-screen-frame .browser-bar .dot.y{ background:#f4bf4f; }
.page .cs-screen-frame .browser-bar .dot.g{ background:#61c554; }
.page .cs-screen-frame .browser-bar .url{
  flex:1; margin-left:8px; height:14px; background:rgba(0,0,0,.1);
  border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:9px;
  display:flex; align-items:center; padding:0 8px; color:rgba(0,0,0,.4);
}
.page .cs-screen-frame .screen-img{ width:100%; display:block; }
.page .cs-screen-frame .screen-placeholder{
  aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:var(--paper);
  font-family:'Caveat',cursive; font-size:20px; color:var(--ink-soft); padding:20px; text-align:center;
}
.page .cs-screen-frame .screen-placeholder svg{ opacity:.3; }
.page .cs-screen-frame .screen-label{
  position:absolute; bottom:0; left:0; right:0; padding:8px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.8);
}
/* tape on first frame */
.page .cs-screen-frame:first-child::before{
  content:''; position:absolute; top:-10px; left:35%; width:80px; height:24px;
  background:color-mix(in srgb, var(--rose) 65%, transparent);
  transform:rotate(-2deg); z-index:5;
  border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12);
}
.page .cs-screen-frame:nth-child(2)::before{
  content:''; position:absolute; top:-10px; right:30%; width:70px; height:24px;
  background:color-mix(in srgb, var(--olive) 55%, transparent);
  transform:rotate(3deg); z-index:5;
  border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12);
}

/* ---- PAPER TEAR DIVIDER ---- */
.page .cs-tear{
  height:48px; width:100%; margin:-1px 0; position:relative; overflow:hidden;
}
.page .cs-tear svg{ width:100%; height:100%; display:block; }

@media (max-width:900px){
  .page .cs-hero{ padding:32px 24px 56px; }
  .page .cs-hero .meta{ grid-template-columns:1fr 1fr; gap:20px; }
  .page .cs-shot{ padding:0 24px 56px; }
  .page .cs-body{ grid-template-columns:1fr; gap:24px; padding:56px 24px; }
  .page .cs-band{ padding:72px 24px; }
  .page .cs-band h3{ font-size:clamp(38px,11vw,60px); }
  .page .cs-band .grid{ grid-template-columns:1fr; }
  .page .cs-screens{ grid-template-columns:1fr; }
  .page .cs-quote{ padding:72px 24px; }
  .page .cs-quote q{ font-size:32px; }
  .page .cs-nav{ grid-template-columns:1fr; padding:56px 24px; }
  .page .cs-nav a.next{ text-align:left; }
}
`;

// Screen labels per project slot
const SCREEN_LABELS = {
  beautygrass:    ['Homepage',      'Product page',   'Mobile view'],
  paynewestwood:  ['Homepage',      'Contact/CTA',    'Industries'],
  sixtychapel:      ['Homepage',      'Gallery',        'Contact form'],
  urbanworld:        ['Homepage',      'Call to submit',  'Responsive'],
  urbanatlantic:     ['Homepage',      'Projects',       'Impact metrics'],
  dispersive:        ['Homepage',      'Architecture',   'Testimonials'],
  digitalspark:      ['Portfolio hero', 'Gallery',        'Inquiry form'],
  teachplaylearn:    ['Homepage',      'Services',       'How it works'],
  wearesantamonica: ['Homelessness',   'Services',       'Community'],
  greenandred:    ['Vineyards',      'Wine shop',      'Club'],
  leolawellness:  ['Homepage',      'Coaching',       'Courses'],
  oldsuffolkpunch:['Venue hero',    'Events/hire',    'Reservations'],
  'creative-breed':['Work index',   'Case study',     'About'],
  ember:          ['Collection',    'Product detail', 'Mobile cart'],
  edupreneurs:    ['Homepage',      'Members area',   'Pricing'],
  powerofyou:     ['Homepage',      'Booking flow',   'Process'],
  lacausa:        ['Lookbook',      'Shop grid',      'Product'],
  parkcounty:     ['Homepage',      'Itinerary',      'Events'],
};

// Palette per project for placeholder screens
const SCREEN_COLORS = {
  beautygrass:    ['#f0ede5','#d4c9b8','#8a9a7a'],
  paynewestwood:  ['#2a4a4a','#d9a8a8','#f5f2f0'],
  sixtychapel:    ['#f5f0e8','#c9a876','#5a5a5a'],
  urbanworld:     ['#1a3a4a','#4a9bb8','#f5f0e8'],
  urbanatlantic:     ['#1a3a5a','#c8a882','#f5f0e8'],
  dispersive:        ['#0a1a3a','#22dd88','#f0f0f0'],
  digitalspark:      ['#f5f5f5','#2d5a4a','#1a1a1a'],
  teachplaylearn:    ['#d4c5b8','#4a8fc8','#f4a95a'],
  wearesantamonica: ['#0052a3','#00a3e0','#f5f0e8'],
  greenandred:    ['#4a3728','#8b7355','#f5f0e0'],
  leolawellness:  ['#d4c5b8','#7ec8b8','#f5f0e8'],
  oldsuffolkpunch:['#4a3a2a','#8b6f47','#f5f0e8'],
  'creative-breed':['#1a1a1a','#e8e5de','#c4bfb0'],
  ember:          ['#f5ede0','#d4956a','#3a2820'],
  edupreneurs:    ['#2d4a3e','#e8d5a0','#f7f3ea'],
  powerofyou:     ['#4a7c7e','#d9a574','#f5f2ec'],
  lacausa:        ['#e8e4dc','#c8a882','#2a2a2a'],
  parkcounty:     ['#2d4a2d','#8fb87a','#f0ede0'],
};

const SCREENSHOT_IMAGES = {
  beautygrass: [
    'img/beautygrass-skincare-ritual-hero-section.jpg',
    'img/beautygrass-collagen-face-mist-product-page.jpg',
    'img/beautygrass-vibrantboost-face-mist-ingredients-breakdown.jpg',
  ],
  paynewestwood: [
    'img/paynewestwood-marketing-strategy-homepage-hero.jpg',
    'img/paynewestwood-contact-connect-consultation.jpg',
    'img/paynewestwood-industry-expertise-services.jpg',
  ],
  sixtychapel: [
    'img/sixtychapel-wedding-venue-website-hero.jpg',
    'img/sixtychapel-events-gallery-showcase.jpg',
    'img/sixtychapel-contact-booking-form.jpg',
  ],
  urbanworld: [
    'img/urbanworld-architecture-festival-homepage.jpg',
    'img/urbanworld-call-for-submissions-laptop-display.jpg',
    'img/urbanworld-responsive-design-tablet-mobile.jpg',
  ],
  urbanatlantic: [
    'img/urbanatlantic-real-estate-development-homepage.jpg',
  ],
  dispersive: [
    'img/dispersive-networks-ultra-secure-homepage.jpg',
    'img/dispersive-networks-responsive-design-tablet.jpg',
    'img/dispersive-networks-virtual-networking-solution.jpg',
  ],
  digitalspark: [
    'img/digitalspark-weddings-photography-homepage.jpg',
    'img/digitalspark-weddings-responsive-mobile-tablet.jpg',
  ],
  teachplaylearn: [
    'img/teachplaylearn-educational-platform-homepage.jpg',
    'img/teachplaylearn-about-us-story-page.jpg',
    'img/teachplaylearn-kindies-product-page.jpg',
  ],
  wearesantamonica: [
    'img/wearesantamonica-addressing-homelessness-initiative.jpg',
    'img/wearesantamonica-programs-services-resources.jpg',
    'img/wearesantamonica-community-stories-impact.jpg',
  ],
  greenandred: [
    'img/greenandred-vineyard-wine-homepage.jpg',
    'img/greenandred-winery-featured-wines.jpg',
    'img/greenandred-wine-tasting-room.jpg',
  ],
  leolawellness: [
    'img/leolawellness-coaching-homepage-hero.jpg',
    'img/leolawellness-responsive-mobile-tablet.jpg',
    'img/leolawellness-wellness-services-overview.jpg',
  ],
  oldsuffolkpunch: [
    'img/oldsuffolkpunch-pub-restaurant-homepage.jpg',
    'img/oldsuffolkpunch-responsive-menu-booking.jpg',
    'img/oldsuffolkpunch-venue-events-details.jpg',
  ],
  'creative-breed': [
    'img/creative-breed-empathy-storytelling-blog.jpg',
    'img/creative-breed-documentary-portfolio-showcase.jpg',
    'img/creative-breed-campaign-documentary-hero.jpg',
  ],
  ember: [
    'img/ember-and-beam-coconut-wax-candle-collection.jpg',
    'img/ember-and-beam-scented-candle-product-page.jpg',
    'img/ember-and-beam-home-fragrance-lifestyle.jpg',
  ],
  edupreneurs: [
    'img/edupreneurs-entrepreneur-network-homepage.jpg',
    'img/edupreneurs-course-creator-community.jpg',
    'img/edupreneurs-membership-platform-interface.jpg',
  ],
  powerofyou: [
    'img/powerofyou-life-coaching-hero.jpg',
    'img/powerofyou-booking-clarity-call.jpg',
    'img/powerofyou-process-framework.jpg',
  ],
  lacausa: [
    'img/lacausa-sustainable-apparel-lookbook.jpg',
    'img/lacausa-organic-fashion-collection-grid.jpg',
    'img/lacausa-sustainable-clothing-product-page.jpg',
  ],
  parkcounty: [
    'img/exploreparkcounty-tourism-homepage-hero.jpg',
    'img/exploreparkcounty-park-location-map.jpg',
    'img/exploreparkcounty-fishing-activities-guide.jpg',
  ],
};

function BrowserFrame({ label, projId, slot }) {
  const labels = SCREEN_LABELS[projId] || ['Screen 1','Screen 2','Screen 3'];
  const colors = SCREEN_COLORS[projId] || ['#f0ede5','#d4c9b8','#8a9a7a'];
  const [bg, accent, dark] = colors;
  const slotLabel = labels[slot] || `View ${slot+1}`;
  const proj = PROJECTS.find(p => p.id === projId);
  const urlSlug = proj ? proj.name.toLowerCase().replace(/[^a-z0-9]/g,'-').replace(/-+/g,'-') : projId;
  const screenshotSrc = SCREENSHOT_IMAGES[projId]?.[slot];

  // Don't render empty frames — hide slots with no screenshot
  if (!screenshotSrc) return null;

  return (
    <div className="cs-screen-frame">
      <div className="browser-bar">
        <div className="dot r"/><div className="dot y"/><div className="dot g"/>
        <div className="url">{urlSlug}.com{slot===2?'/mobile':slot===1?'/'+slotLabel.toLowerCase().replace(/ /g,'-'):''}</div>
      </div>
      <img src={screenshotSrc} alt={slotLabel} className="screen-img" style={{width:'100%',height:'auto',display:'block'}}/>
      <div className="screen-label">{slotLabel}</div>
    </div>
  );
}

function PaperTear({ flip }) {
  // Hand-drawn jagged paper tear SVG
  const path = "M0,0 L0,48 Q40,28 80,44 Q120,60 160,38 Q200,16 240,40 Q280,60 320,32 Q360,8 400,36 Q440,56 480,30 Q520,8 560,34 Q600,52 640,28 Q680,8 720,36 Q760,58 800,30 Q840,8 880,38 Q920,60 960,28 Q1000,4 1040,32 Q1080,52 1120,28 Q1160,8 1200,38 L1200,0 Z";
  return (
    <div className="cs-tear" style={flip?{transform:'scaleY(-1) scaleX(-1)'}:{}}>
      <svg viewBox="0 0 1200 48" preserveAspectRatio="none">
        <path d={path} fill="var(--paper)"/>
      </svg>
    </div>
  );
}

function CSNotFound(){
  return (
    <PageShell active="work">
      <header className="pghdr">
        <div className="eyebrow">Work · 404</div>
        <h1>No such<br/><em>project</em>.</h1>
        <p className="lede">That case study isn't here. Browse the full archive instead.</p>
        <a className="btn" href="work.html" style={{marginTop:32}}>← All work</a>
      </header>
    </PageShell>
  );
}

function CaseStudyPage(){
  const params = new URLSearchParams(location.search);
  const slug = params.get('slug') || PROJECTS[0].id;
  const idx = PROJECTS.findIndex(p => p.id === slug);
  const proj = PROJECTS[idx];
  const d = WORK_DETAILS[slug];

  React.useEffect(() => {
    if (!proj || !d){ document.title = 'Project not found — Maia Hariton'; return; }
    applySEO({
      title: `${proj.name} — Case study — Maia Hariton`,
      description: d.lede,
      image: proj.img, type:'article',
    });
    applyJSONLD({
      '@context':'https://schema.org', '@type':'CreativeWork',
      name: proj.name, about: proj.kind, dateCreated: proj.year,
      description: d.lede, image: new URL(proj.img, location.href).href,
      creator: { '@type':'Person', name:'Maia Hariton' },
    });
  }, [proj, d]);

  if (!proj || !d) return <CSNotFound />;

  const prev = PROJECTS[(idx - 1 + PROJECTS.length) % PROJECTS.length];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  return (
    <PageShell active="work">
      <style>{CSCSS}</style>
      <header className="pghdr">
        <div className="eyebrow">Case study · {proj.platform} · {proj.year}</div>
        <h1><em>{proj.name}</em></h1>
        <p className="lede">{d.lede}</p>
        <Stamp at={{ bottom: 40, right: 70 }} rot={-10} spin>{proj.platform} · {proj.year} · {proj.tag} ·</Stamp>
      </header>

      <section className="cs-hero">
        <div className="meta">
          <div><div className="l">Client</div><div className="v">{proj.name}</div></div>
          <div><div className="l">Platform</div><div className="v">{proj.platform}</div></div>
          <div><div className="l">Scope</div><div className="v">{d.scope}</div></div>
          <div><div className="l">Timeline</div><div className="v">{d.timeline}</div></div>
        </div>
      </section>

      {/* Hero screenshot with tape */}
      <section className="cs-shot" style={{position:'relative'}}>
        <div className="frame"><img src={proj.img} alt={proj.name + ' — ' + proj.kind}/></div>
        <Tape at={{ top: -14, left: '50%' }} rot={3} color="olive" />
        <Tape at={{ top: -8, right: 120 }} rot={-5} color="rose" />
        <Note at={{ bottom: 30, left: 70 }} rot={-6}>{proj.tag} <span className="arr">↑</span></Note>
        <Doodle at={{ top: 20, right: 56 }} rot={15}>✦</Doodle>
      </section>

      <section className="cs-body">
        <h2>The brief.</h2>
        <div>{d.brief.map((p,i) => <p key={i} dangerouslySetInnerHTML={{__html:p}} />)}</div>
      </section>

      {/* Paper tear transition */}
      <PaperTear />

      <section className="cs-body" style={{background:'var(--paper)', margin:'0', padding:'80px 56px'}}>
        <h2>The approach.</h2>
        <div>{d.approach.map((p,i) => <p key={i} dangerouslySetInnerHTML={{__html:p}} />)}</div>
      </section>

      <PaperTear flip />

      {/* 3-screenshot gallery */}
      <section className="cs-band" style={{position:'relative'}}>
        <div className="eyebrow">Selected screens</div>
        <h3>A few frames from <em>the build</em>.</h3>
        <Sticker at={{ top: 90, right: 70 }} rot={8} color="olive">in the details ✦</Sticker>
        <Doodle at={{ top: 160, left: 56 }} rot={-8}>↓</Doodle>
        <div className="cs-screens">
          <BrowserFrame projId={slug} slot={0} />
          <BrowserFrame projId={slug} slot={1} />
          <BrowserFrame projId={slug} slot={2} />
        </div>
        <p style={{marginTop:20,fontSize:12,fontFamily:"'JetBrains Mono',monospace",color:'var(--ink-soft)',letterSpacing:'.08em'}}>
          ↑ Replace these with real screenshots by updating the img src on each .cs-screen-frame
        </p>
      </section>

      {/* Testimonial quote */}
      <section className="cs-quote" style={{position:'relative'}}>
        <Doodle at={{ top: 50, left: 60 }} rot={-12}>❝</Doodle>
        <Doodle at={{ bottom: 50, right: 60 }} rot={8}>❞</Doodle>
        <Note at={{ bottom: 40, right: 70 }} rot={8}>this made me happy ❤</Note>
        <Tape at={{ top: 100, right: 80 }} rot={-8} color="rose" />
        <q>{d.quote.q}</q>
        <div className="who">— {d.quote.who}</div>
      </section>

      {/* Outcomes */}
      <section className="cs-band" style={{position:'relative'}}>
        <div className="eyebrow">Outcomes</div>
        <h3>The numbers,<br/>six months <em>after</em>.</h3>
        <Tape at={{ top: 60, right: 100 }} rot={5} color="terra" />
        <Note at={{ bottom: 40, left: 56 }} rot={4}>proof it worked ↑</Note>
        <div className="grid">
          {d.outcomes.map((o,i) => (
            <div key={i} className="stat"><div className="n">{o.n}</div><div className="l">{o.l}</div></div>
          ))}
        </div>
      </section>

      {/* Prev / Next nav */}
      <section className="cs-nav">
        <a className="prev" href={'case-study.html?slug='+prev.id}><span className="l">← Previous</span><span className="t">{prev.name}</span></a>
        <a className="next" href={'case-study.html?slug='+next.id}><span className="l">Next case →</span><span className="t">{next.name}</span></a>
      </section>

      <div style={{textAlign:'center',padding:'0 0 40px'}}>
        <a href="work.html" style={{fontFamily:"'JetBrains Mono',monospace",fontSize:12,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-soft)',textDecoration:'none',borderBottom:'1px solid var(--rule)',paddingBottom:3}}>← Back to all work</a>
      </div>

      <section className="cta-strip" style={{position:'relative'}}>
        <Sticker at={{ top: -20, right: 80 }} rot={-5} color="ink">let's go ✨</Sticker>
        <h2>Want <em>this</em>, but for you?</h2>
        <p>A 30-minute intro call, no pitch deck. We'll figure out if we're a fit and what it'll take.</p>
        <a className="btn" href="contact.html">Get in touch ↗</a>
      </section>
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CaseStudyPage/>);