// sections.jsx — Iron & Ink page sections

/* ─────────── NAV ─────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    transition: 'background .3s, backdrop-filter .3s, border-color .3s',
    background: scrolled ? 'rgba(10,9,8,.72)' : 'transparent',
    backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
    borderBottom: '1px solid ' + (scrolled ? 'var(--hair)' : 'transparent'),
  };
  return (
    <nav style={navStyle}>
      <div className="wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'18px 0', position:'relative', zIndex:2 }}>
        <a href="#top" style={{ display:'flex', alignItems:'center', gap:12, textDecoration:'none', color:'var(--ink)', flexShrink:0 }}>
          <Mark/>
          <span style={{ fontFamily:'"Big Shoulders Display"', fontWeight:800, fontSize:18, letterSpacing:'.04em', textTransform:'uppercase', whiteSpace:'nowrap' }}>
            Iron <span style={{ color:'var(--mute)' }}>&amp;</span> Ink
          </span>
        </a>
        <div style={{ display:'flex', gap:36, alignItems:'center' }} className="nav-links">
          {[
            ['Work','#work'],
            ['Services','#services'],
            ['Process','#process'],
            ['Studio','#about'],
          ].map(([l,h]) => (
            <a key={l} href={h} className="mono" style={{
              color:'var(--ink-dim)', textDecoration:'none',
              fontSize:11.5, letterSpacing:'.12em', textTransform:'uppercase'
            }}>{l}</a>
          ))}
        </div>
        <a href="#contact" className="btn btn-ghost" style={{ padding:'10px 16px', fontSize:11, flexShrink:0, whiteSpace:'nowrap' }}>
          Start a Brief <span className="arr">→</span>
        </a>
      </div>
      <style>{`
        @media (max-width: 820px){
          .nav-links{ display:none !important }
        }
      `}</style>
    </nav>
  );
}

function Mark() {
  return (
    <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden="true">
      <rect x=".5" y=".5" width="31" height="31" fill="none" stroke="var(--accent)" strokeWidth="1"/>
      {/* Left I */}
      <rect x="7" y="8" width="3" height="16" fill="var(--ink)"/>
      <rect x="5" y="8" width="7" height="1.5" fill="var(--ink)"/>
      <rect x="5" y="22.5" width="7" height="1.5" fill="var(--ink)"/>
      {/* Ampersand dot */}
      <circle cx="16" cy="16" r="1.4" fill="var(--accent)"/>
      {/* Right I */}
      <rect x="22" y="8" width="3" height="16" fill="var(--ink)"/>
      <rect x="20" y="8" width="7" height="1.5" fill="var(--ink)"/>
      <rect x="20" y="22.5" width="7" height="1.5" fill="var(--ink)"/>
    </svg>
  );
}

/* ─────────── HERO ─────────── */
function Hero() {
  return (
    <header id="top" style={{
      position:'relative', paddingTop:120, paddingBottom:80,
      minHeight:'min(960px, 100vh)',
    }}>
      <div className="wrap" style={{
        display:'grid',
        gridTemplateColumns:'1.05fr .95fr',
        gap:'clamp(32px, 6vw, 80px)',
        alignItems:'center',
      }}>
        <div style={{ minWidth:0 }} className="hero-copy">
          <div className="sect-label" style={{ marginBottom:24 }}>
            <span className="num">001 / STUDIO INDEX</span>
            <span className="bar"/>
            <span className="mono mute">EST · 2018 · NYC</span>
          </div>

          <h1 className="display" style={{
            fontSize:'clamp(64px, 9vw, 152px)',
            margin:0,
            color:'var(--ink)',
          }}>
            Forging<br/>
            brands.<br/>
            <em>Writing</em><br/>
            markets.
          </h1>

          <p style={{
            marginTop:36, marginBottom:0,
            maxWidth:520,
            fontSize:'clamp(16px, 1.3vw, 19px)',
            lineHeight:1.55,
            color:'var(--ink-dim)',
          }}>
            Iron &amp; Ink is a strategy and creative firm for operators who refuse to blend in.
            We engineer brand systems, deploy paid programs, and turn market pressure into momentum —
            measured in revenue, not impressions.
          </p>

          <div style={{ display:'flex', gap:14, marginTop:40, flexWrap:'wrap' }}>
            <a className="btn btn-primary" href="#contact">
              Forge a Brief <span className="arr">→</span>
            </a>
            <a className="btn btn-ghost" href="#work">
              See the Work <span className="arr">↗</span>
            </a>
          </div>

          <div style={{ display:'flex', gap:24, marginTop:56, flexWrap:'wrap' }}>
            <Stat k="312%" l="Avg. campaign lift"/>
            <Divider/>
            <Stat k="4.8×" l="Avg. paid ROAS"/>
            <Divider/>
            <Stat k="68%" l="Lower CAC"/>
          </div>
        </div>

        <div style={{ position:'relative', minWidth:0 }} className="hero-visual-col">
          <HeroVisual/>
        </div>
      </div>

      {/* divider */}
      <div style={{ marginTop:80, borderTop:'1px solid var(--hair)', position:'relative', zIndex:2 }}></div>

      <style>{`
        @media (max-width: 900px){
          .hero-copy{ grid-column: 1 / -1 }
          .hero-visual-col{ display:none }
          header > .wrap{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </header>
  );
}

function Divider() {
  return <span aria-hidden="true" style={{ width:1, alignSelf:'stretch', background:'var(--hair-strong)' }}/>;
}

function Stat({ k, l }) {
  return (
    <div>
      <div className="display" style={{ fontSize:36, color:'var(--ink)', lineHeight:1 }}>{k}</div>
      <div className="mono mute" style={{ marginTop:6, fontSize:10.5 }}>{l}</div>
    </div>
  );
}

/* ─────────── ABOUT ─────────── */
function About() {
  return (
    <Section id="about" num="002" label="STUDIO / DOSSIER" title="We don't do branding theatre. We build market presence.">
      <div style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:'clamp(32px,5vw,72px)' }} className="about-grid">
        <div>
          <p style={{ fontSize:'clamp(17px,1.5vw,22px)', lineHeight:1.55, color:'var(--ink-dim)', margin:0 }}>
            Iron &amp; Ink is a five-discipline firm — strategy, brand, paid media, content systems,
            and growth intelligence — operating under a single P&amp;L. We work with founders, CMOs,
            and operators who treat marketing as <em style={{ fontFamily:'"Instrument Serif"', color:'var(--accent-2)' }}>compound infrastructure</em>,
            not a quarterly performance.
          </p>
          <p style={{ fontSize:'clamp(15px,1.1vw,17px)', lineHeight:1.65, color:'var(--mute)', marginTop:24 }}>
            Every engagement begins with a market diagnosis and ends with a measurable position.
            We instrument what we ship, defend what we build, and refuse to confuse activity with outcome.
          </p>

          <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginTop:32 }}>
            {['B2B SaaS','Consumer','Spirits','Hospitality','Climate','Industrials'].map(t => (
              <span key={t} className="chip"><span className="dot"/>{t}</span>
            ))}
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          {[
            ['38','Brands forged'],
            ['$220M','Media deployed'],
            ['12','Industries served'],
            ['9.4 yr','Avg. client tenure'],
          ].map(([k,l]) => (
            <div key={l} className="card" style={{ padding:'22px 22px 26px' }}>
              <div className="mono mute" style={{ fontSize:10 }}>↳ INDEX</div>
              <div className="display" style={{ fontSize:'clamp(38px,4vw,56px)', color:'var(--ink)', marginTop:12 }}>{k}</div>
              <div className="mono" style={{ color:'var(--ink-dim)', fontSize:11.5, marginTop:10 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .about-grid{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </Section>
  );
}

/* ─────────── SERVICES ─────────── */
const SERVICES = [
  { n:'01', t:'Brand Strategy',
    d:'Positioning, narrative architecture, and category design for brands that refuse to compete on price.',
    items:['Market diagnosis','Positioning systems','Naming · verbal identity','Story architecture'] },
  { n:'02', t:'Paid Advertising',
    d:'Full-funnel paid programs across Meta, Google, LinkedIn, TikTok and connected TV — engineered for ROAS.',
    items:['Channel architecture','Creative testing','Audience modelling','Incrementality'] },
  { n:'03', t:'Social Media Campaigns',
    d:'Always-on social systems and tentpole campaigns built around culture, not posting cadence.',
    items:['Channel strategy','Editorial calendars','Creator partnerships','Community ops'] },
  { n:'04', t:'Content Systems',
    d:'Editorial engines, sales narratives, and content infrastructure that compound across every channel.',
    items:['Editorial OS','Sales enablement','Long-form / thought leadership','Voice systems'] },
  { n:'05', t:'Web & Landing Pages',
    d:'High-conversion sites, microsites, and campaign pages — designed and instrumented to perform.',
    items:['Brand sites','Conversion pages','Experiment design','CMS infrastructure'] },
  { n:'06', t:'Growth Intelligence',
    d:'Analytics, attribution, and decision systems so every dollar is defended and every test is decisive.',
    items:['MMM / attribution','Dashboards','Experiment ops','Reporting cadence'] },
];

function Services() {
  return (
    <Section id="services" num="003" label="CAPABILITIES" title="Six disciplines. One operating system.">
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(3, minmax(0,1fr))',
        gap:0,
        borderTop:'1px solid var(--hair)',
        borderLeft:'1px solid var(--hair)',
      }} className="svc-grid">
        {SERVICES.map(s => (
          <article key={s.n} className="svc-cell" style={{
            padding:'clamp(24px, 2.4vw, 36px)',
            borderRight:'1px solid var(--hair)',
            borderBottom:'1px solid var(--hair)',
            position:'relative',
            minHeight:340,
            display:'flex', flexDirection:'column',
            background:'linear-gradient(180deg, rgba(244,240,234,.015), transparent 70%)',
            transition:'background .35s',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span className="mono" style={{ color:'var(--accent)', fontSize:11, letterSpacing:'.18em' }}>{s.n}</span>
              <ServiceGlyph n={s.n}/>
            </div>
            <h3 className="display" style={{
              fontSize:'clamp(28px, 2.6vw, 36px)', margin:'28px 0 14px', color:'var(--ink)',
              letterSpacing:'-.005em',
            }}>{s.t}</h3>
            <p style={{ color:'var(--ink-dim)', margin:0, fontSize:14.5, lineHeight:1.6 }}>{s.d}</p>

            <ul style={{ listStyle:'none', padding:0, margin:'auto 0 0', paddingTop:24,
                         display:'flex', flexDirection:'column', gap:8 }}>
              {s.items.map(it => (
                <li key={it} className="mono" style={{
                  color:'var(--mute)', fontSize:11, letterSpacing:'.06em',
                  display:'flex', alignItems:'center', gap:10,
                }}>
                  <span style={{ width:14, height:1, background:'var(--accent)', display:'inline-block' }}/>
                  {it}
                </li>
              ))}
            </ul>
          </article>
        ))}
      </div>
      <style>{`
        .svc-cell:hover{ background: linear-gradient(180deg, rgba(200,122,74,.05), transparent 75%) !important }
        @media (max-width: 1000px){ .svc-grid{ grid-template-columns: repeat(2, 1fr) !important } }
        @media (max-width: 640px){ .svc-grid{ grid-template-columns: 1fr !important } }
      `}</style>
    </Section>
  );
}

function ServiceGlyph({ n }) {
  // Small abstract glyph per service
  const props = { width:36, height:36, viewBox:'0 0 36 36', fill:'none',
                  stroke:'var(--ink-dim)', strokeWidth:1, style:{ opacity:.6 } };
  switch (n) {
    case '01': return (<svg {...props}><circle cx="18" cy="18" r="14"/><circle cx="18" cy="18" r="7"/><circle cx="18" cy="18" r="1.5" fill="var(--accent)" stroke="none"/></svg>);
    case '02': return (<svg {...props}><path d="M4 28 L14 18 L20 22 L32 8"/><circle cx="32" cy="8" r="2" fill="var(--accent)" stroke="none"/></svg>);
    case '03': return (<svg {...props}><circle cx="10" cy="18" r="4"/><circle cx="26" cy="10" r="4"/><circle cx="26" cy="26" r="4"/><path d="M14 18 L22 10 M14 18 L22 26"/></svg>);
    case '04': return (<svg {...props}><rect x="6" y="6" width="20" height="24"/><line x1="10" y1="12" x2="22" y2="12"/><line x1="10" y1="17" x2="22" y2="17"/><line x1="10" y1="22" x2="18" y2="22"/><line x1="14" y1="30" x2="30" y2="14" stroke="var(--accent)"/></svg>);
    case '05': return (<svg {...props}><rect x="4" y="6" width="28" height="20"/><line x1="4" y1="12" x2="32" y2="12"/><circle cx="8" cy="9" r="1" fill="var(--accent)" stroke="none"/><line x1="10" y1="18" x2="20" y2="18"/><line x1="10" y1="22" x2="16" y2="22"/></svg>);
    case '06': return (<svg {...props}><line x1="6" y1="30" x2="30" y2="30"/><rect x="8" y="20" width="4" height="10"/><rect x="16" y="14" width="4" height="16"/><rect x="24" y="8" width="4" height="22" fill="var(--accent-ink)" stroke="var(--accent)"/></svg>);
    default: return null;
  }
}

/* ─────────── WORK / CASE STUDIES ─────────── */
const CASES = [
  {
    tag:'CASE / 04', client:'NORTHWIND FINANCIAL', industry:'Wealth Management · B2C',
    title:'A category re-position for advisors tired of looking like every other firm.',
    goal:'Re-platform the brand and drive qualified inbound for a new RIA channel.',
    metrics:[['+312%','Qualified pipeline'],['4.8×','Paid ROAS'],['—68%','CAC vs. Q1']],
    swatch:['#2c2a26','#3a352c','#c87a4a'],
    pattern:'rings',
  },
  {
    tag:'CASE / 03', client:'VAULT SPIRITS', industry:'Premium spirits · D2C',
    title:'A limited-release campaign that sold through in eleven days.',
    goal:'Launch a 6,000-unit single-cask release with no paid retail support.',
    metrics:[['100%','Sell-through'],['11 days','To exhausted'],['1.2M','Earned impressions']],
    swatch:['#1f1c17','#231b13','#b78958'],
    pattern:'grid',
  },
  {
    tag:'CASE / 02', client:'HALLAND ROBOTICS', industry:'Industrial automation · B2B',
    title:'A demand engine for a category most buyers couldn\u2019t name yet.',
    goal:'Build a buyer-led content system and ABM motion for enterprise pilots.',
    metrics:[['9','Enterprise pilots'],['+184%','SQLs / quarter'],['$14.2M','Pipeline opened']],
    swatch:['#161614','#1c2026','#5e7d9a'],
    pattern:'topo',
  },
  {
    tag:'CASE / 01', client:'OBSIDIAN COFFEE CO.', industry:'Specialty F&B · DTC',
    title:'A flagship D2C launch with editorial weight and operator discipline.',
    goal:'Replace wholesale with a direct subscription business in twelve months.',
    metrics:[['43%','Sub. attach rate'],['+228%','LTV / cohort'],['—41%','Refund rate']],
    swatch:['#1a1814','#2a221c','#d4a574'],
    pattern:'wave',
  },
];

function Work() {
  return (
    <Section id="work" num="004" label="SELECTED WORK" title="Receipts. Not reels.">
      <div style={{ display:'grid', gap:'clamp(20px, 2vw, 28px)' }}>
        {CASES.map((c, i) => <CaseCard key={i} c={c} idx={i}/>)}
      </div>
    </Section>
  );
}

function CaseCard({ c, idx }) {
  const reverse = idx % 2 === 1;
  return (
    <article className="card case-card" style={{
      display:'grid',
      gridTemplateColumns: reverse ? '1fr 1.05fr' : '1.05fr 1fr',
      gap:0,
      padding:0,
      minHeight:340,
    }}>
      {/* Visual */}
      <div style={{
        order: reverse ? 2 : 1,
        background:`linear-gradient(135deg, ${c.swatch[0]}, ${c.swatch[1]})`,
        position:'relative', overflow:'hidden',
        minHeight:280,
      }}>
        <CasePattern kind={c.pattern} accent={c.swatch[2]}/>
        <div style={{ position:'absolute', top:18, left:18, right:18,
                      display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span className="mono" style={{ color:'var(--mute)', fontSize:10, letterSpacing:'.18em' }}>{c.tag}</span>
          <span className="mono" style={{ color:'var(--mute)', fontSize:10, letterSpacing:'.18em' }}>{c.industry.split('·')[0].trim()}</span>
        </div>
        <div style={{ position:'absolute', bottom:22, left:22, right:22 }}>
          <div className="display" style={{ fontSize:'clamp(34px,3.8vw,54px)', color:'var(--ink)', lineHeight:.95 }}>
            {c.client}
          </div>
        </div>
      </div>
      {/* Body */}
      <div style={{
        order: reverse ? 1 : 2,
        padding:'clamp(28px,3vw,44px)',
        display:'flex', flexDirection:'column', justifyContent:'space-between',
        background:'linear-gradient(180deg, rgba(244,240,234,.018), transparent)',
      }}>
        <div>
          <div className="mono mute" style={{ fontSize:11, marginBottom:18 }}>{c.industry}</div>
          <h3 style={{
            fontFamily:'"Instrument Serif", serif',
            fontWeight:400,
            fontSize:'clamp(24px, 2.2vw, 34px)',
            lineHeight:1.18,
            margin:0,
            color:'var(--ink)',
            letterSpacing:'-.005em',
          }}>
            "{c.title}"
          </h3>
          <p style={{ color:'var(--ink-dim)', marginTop:18, fontSize:14.5, lineHeight:1.6 }}>
            <span className="mono accent" style={{ marginRight:10, fontSize:10.5 }}>GOAL ↳</span>
            {c.goal}
          </p>
        </div>
        <div>
          <div style={{ height:1, background:'var(--hair-strong)', margin:'26px 0 22px' }}/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
            {c.metrics.map(([k,l]) => (
              <div key={l}>
                <div className="display" style={{ fontSize:'clamp(24px,2.4vw,34px)', color:'var(--ink)', lineHeight:1 }}>{k}</div>
                <div className="mono mute" style={{ fontSize:10, marginTop:6, letterSpacing:'.1em' }}>{l}</div>
              </div>
            ))}
          </div>
          <a href="#contact" className="mono" style={{
            display:'inline-flex', alignItems:'center', gap:10,
            marginTop:26, color:'var(--accent)', textDecoration:'none',
            fontSize:11.5, letterSpacing:'.14em',
          }}>
            READ THE DOSSIER <span>→</span>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .case-card{ grid-template-columns: 1fr !important }
          .case-card > *{ order: unset !important }
        }
      `}</style>
    </article>
  );
}

function CasePattern({ kind, accent }) {
  const common = { position:'absolute', inset:0, width:'100%', height:'100%' };
  if (kind === 'rings') {
    return (
      <svg {...common} viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
        <g fill="none" stroke="rgba(244,240,234,.08)" strokeWidth=".75">
          {Array.from({ length: 14 }).map((_, i) => (
            <circle key={i} cx="200" cy="160" r={20 + i*22}/>
          ))}
        </g>
        <circle cx="200" cy="160" r="10" fill={accent} opacity=".9"/>
        <circle cx="200" cy="160" r="22" fill="none" stroke={accent} strokeWidth="1.5"/>
      </svg>
    );
  }
  if (kind === 'grid') {
    return (
      <svg {...common} viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
        <g stroke="rgba(244,240,234,.07)" strokeWidth=".5">
          {Array.from({ length: 20 }).map((_, i) => (
            <line key={'h'+i} x1="0" x2="400" y1={i*16} y2={i*16}/>
          ))}
          {Array.from({ length: 26 }).map((_, i) => (
            <line key={'v'+i} y1="0" y2="320" x1={i*16} x2={i*16}/>
          ))}
        </g>
        <rect x="120" y="80" width="160" height="160" fill="none" stroke={accent} strokeWidth="1.2"/>
        <rect x="150" y="110" width="100" height="100" fill={accent} opacity=".18"/>
        <line x1="120" y1="80" x2="280" y2="240" stroke={accent} strokeWidth=".75"/>
      </svg>
    );
  }
  if (kind === 'topo') {
    return (
      <svg {...common} viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
        <g fill="none" stroke="rgba(244,240,234,.09)" strokeWidth=".75">
          {Array.from({ length: 11 }).map((_, i) => (
            <path key={i} d={`M -20 ${60 + i*22} Q 100 ${20 + i*22} 200 ${60 + i*22} T 420 ${60 + i*22}`}/>
          ))}
        </g>
        <circle cx="280" cy="170" r="4" fill={accent}/>
        <circle cx="280" cy="170" r="14" fill="none" stroke={accent} strokeWidth="1"/>
        <line x1="80" y1="170" x2="266" y2="170" stroke={accent} strokeDasharray="2 4" strokeWidth=".75"/>
      </svg>
    );
  }
  if (kind === 'wave') {
    return (
      <svg {...common} viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice">
        <g fill="none" stroke="rgba(244,240,234,.1)" strokeWidth="1">
          {Array.from({ length: 18 }).map((_, i) => (
            <path key={i} d={`M 0 ${i*20} C 120 ${i*20 + 30}, 280 ${i*20 - 30}, 400 ${i*20}`} />
          ))}
        </g>
        <path d="M 0 200 C 120 230, 280 170, 400 200" stroke={accent} strokeWidth="2" fill="none"/>
      </svg>
    );
  }
  return null;
}

/* ─────────── PROCESS ─────────── */
const STEPS = [
  { n:'01', name:'Diagnose', deliverable:'Market Audit',
    pts:['Category & competitor map','Customer & buyer evidence','Channel performance teardown','North-star metric & gap analysis'] },
  { n:'02', name:'Design', deliverable:'Brand & Campaign System',
    pts:['Positioning & narrative','Visual & verbal identity','Channel architecture','Creative testing plan'] },
  { n:'03', name:'Deploy', deliverable:'In-Market Launch',
    pts:['Production sprints','Paid + earned rollout','Site, content & lifecycle','Sales enablement assets'] },
  { n:'04', name:'Optimize', deliverable:'Compounding Engine',
    pts:['Weekly performance ops','Experimentation cadence','Quarterly reviews','MMM / attribution'] },
];

function Process() {
  return (
    <Section id="process" num="005" label="OPERATING MODEL" title="How the work gets made.">
      <div className="proc-grid" style={{
        display:'grid',
        gridTemplateColumns:'repeat(4,1fr)',
        gap:'clamp(20px,2vw,28px)',
        position:'relative',
      }}>
        {/* connecting rail */}
        <div className="proc-rail" style={{
          position:'absolute', top:32, left:'8%', right:'8%', height:1,
          background:'linear-gradient(90deg, transparent, var(--hair-strong) 8%, var(--hair-strong) 92%, transparent)',
        }}/>
        {STEPS.map((s,i) => (
          <div key={s.n} className="proc-cell" style={{ position:'relative' }}>
            <div style={{
              position:'relative', zIndex:2,
              width:64, height:64, borderRadius:'50%',
              background:'var(--bg)',
              border:'1px solid var(--accent)',
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow:'0 0 0 6px var(--bg), 0 0 22px var(--accent-glow)',
              marginBottom:22,
            }}>
              <span className="display" style={{ fontSize:22, color:'var(--accent)' }}>{s.n}</span>
            </div>
            <div className="mono mute" style={{ fontSize:10, marginBottom:6 }}>DELIVERABLE</div>
            <div className="mono" style={{ fontSize:11.5, color:'var(--ink-dim)', marginBottom:18, letterSpacing:'.1em' }}>
              {s.deliverable.toUpperCase()}
            </div>
            <h4 className="display" style={{
              fontSize:'clamp(30px,2.6vw,42px)', margin:'0 0 18px', color:'var(--ink)',
            }}>{s.name}</h4>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10 }}>
              {s.pts.map(p => (
                <li key={p} style={{ color:'var(--ink-dim)', fontSize:13.5, lineHeight:1.5,
                                     paddingLeft:18, position:'relative' }}>
                  <span style={{ position:'absolute', left:0, top:'.7em', width:8, height:1, background:'var(--accent)' }}/>
                  {p}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 900px){
          .proc-grid{ grid-template-columns: 1fr 1fr !important }
          .proc-rail{ display:none }
        }
        @media (max-width: 560px){
          .proc-grid{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </Section>
  );
}

/* ─────────── METRICS ─────────── */
function Metrics() {
  const items = [
    { k:'312%', l:'Campaign lift', sub:'Avg. across paid programs, 2024–25', kind:'bar' },
    { k:'4.8×', l:'Return on ad spend', sub:'Blended ROAS, 90-day window', kind:'pie' },
    { k:'68%', l:'Lower acquisition cost', sub:'vs. baseline, first 6 mo.', kind:'down' },
    { k:'1.2M', l:'Earned impressions', sub:'PR + organic, per flagship launch', kind:'sparkle' },
  ];
  return (
    <section id="metrics" style={{
      position:'relative', padding:'clamp(80px, 9vw, 140px) 0',
      borderTop:'1px solid var(--hair)',
      background:'linear-gradient(180deg, rgba(200,122,74,.04), transparent 60%)',
    }}>
      <div className="wrap">
        <div className="sect-label" style={{ marginBottom:36 }}>
          <span className="num">006 / PERFORMANCE</span>
          <span className="bar"/>
          <span className="mono mute">TRAILING 24 MONTHS</span>
        </div>
        <h2 className="display" style={{
          fontSize:'clamp(40px,5.5vw,80px)', margin:'0 0 60px', color:'var(--ink)', maxWidth:1000,
        }}>
          Numbers we'll <em>defend</em> on a call.
        </h2>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0,
          border:'1px solid var(--hair)',
        }} className="metric-grid">
          {items.map((m,i) => (
            <div key={i} className="metric-cell" style={{
              padding:'clamp(28px,3vw,44px)',
              borderRight: i < items.length-1 ? '1px solid var(--hair)' : 'none',
              position:'relative',
              minHeight:260,
              display:'flex', flexDirection:'column', justifyContent:'space-between',
              background:'linear-gradient(180deg, rgba(244,240,234,.018), transparent)',
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                <div className="mono accent" style={{ fontSize:10.5, letterSpacing:'.18em' }}>0{i+1}</div>
                <MetricGlyph kind={m.kind}/>
              </div>
              <div>
                <div className="display" style={{
                  fontSize:'clamp(56px,6vw,96px)', color:'var(--ink)', lineHeight:.9,
                  letterSpacing:'-.02em',
                }}>{m.k}</div>
                <div style={{ marginTop:14, color:'var(--ink-dim)', fontSize:15, fontWeight:500 }}>{m.l}</div>
                <div className="mono mute" style={{ marginTop:6, fontSize:10.5, letterSpacing:'.06em' }}>{m.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px){
          .metric-grid{ grid-template-columns: 1fr 1fr !important }
          .metric-cell:nth-child(2){ border-right:none !important }
          .metric-cell:nth-child(1),
          .metric-cell:nth-child(2){ border-bottom:1px solid var(--hair) }
        }
        @media (max-width: 560px){
          .metric-grid{ grid-template-columns: 1fr !important }
          .metric-cell{ border-right:none !important; border-bottom:1px solid var(--hair) }
        }
      `}</style>
    </section>
  );
}

function MetricGlyph({ kind }) {
  const p = { width:70, height:38, viewBox:'0 0 70 38', fill:'none',
              stroke:'var(--accent)', strokeWidth:1 };
  if (kind === 'bar') {
    return (
      <svg {...p}>
        <rect x="2" y="22" width="8" height="14" fill="var(--accent-ink)"/>
        <rect x="14" y="16" width="8" height="20" fill="var(--accent-ink)"/>
        <rect x="26" y="10" width="8" height="26" fill="var(--accent-ink)"/>
        <rect x="38" y="4"  width="8" height="32" fill="var(--accent)" stroke="none"/>
        <line x1="2" y1="36" x2="68" y2="36"/>
      </svg>
    );
  }
  if (kind === 'pie') {
    return (
      <svg width="38" height="38" viewBox="0 0 38 38" fill="none">
        <circle cx="19" cy="19" r="14" stroke="var(--hair-strong)" strokeWidth="6"/>
        <circle cx="19" cy="19" r="14" stroke="var(--accent)" strokeWidth="6"
                strokeDasharray="70 88" transform="rotate(-90 19 19)" />
      </svg>
    );
  }
  if (kind === 'down') {
    return (
      <svg {...p}>
        <path d="M 2 8 L 18 16 L 32 12 L 48 24 L 66 32"/>
        <path d="M 60 26 L 66 32 L 60 36" />
        <circle cx="2" cy="8" r="2" fill="var(--accent)" stroke="none"/>
      </svg>
    );
  }
  return (
    <svg {...p}>
      <path d="M 2 26 L 12 18 L 22 22 L 32 10 L 44 16 L 56 4 L 68 8" />
      <circle cx="56" cy="4" r="2" fill="var(--accent)" stroke="none"/>
    </svg>
  );
}

/* ─────────── TESTIMONIALS ─────────── */
const TESTIMONIALS = [
  { quote:'Iron & Ink did in one quarter what two prior agencies couldn\u2019t do in a year. They run their work like operators, not a service vendor.',
    name:'Margaux Reilly', role:'CEO, Northwind Financial', mark:'NF' },
  { quote:'The strategy was sharp and the execution was sharper. We finally have a brand that earns the price tag we put on it.',
    name:'David Han', role:'Founder, Obsidian Coffee Co.', mark:'OC' },
  { quote:'They built us an editorial engine that compounds. Twelve months in, organic out-performs paid — and paid is best-in-class.',
    name:'Priya Anand', role:'VP Marketing, Halland Robotics', mark:'HR' },
];

function Testimonials() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(v => (v + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(t);
  }, []);
  const cur = TESTIMONIALS[i];
  return (
    <Section id="voices" num="007" label="VOICES" title="What operators say.">
      <div style={{
        display:'grid', gridTemplateColumns:'2.1fr 1fr', gap:'clamp(28px,4vw,72px)',
        alignItems:'start',
      }} className="test-grid">
        <div>
          <div className="display" style={{
            fontSize:'clamp(40px,4vw,68px)',
            color:'var(--accent)',
            lineHeight:.6,
            marginBottom:-12,
            fontFamily:'"Instrument Serif", serif',
            textTransform:'none',
            fontWeight:400,
            fontStyle:'italic',
          }}>"</div>
          <blockquote key={i} style={{
            margin:0,
            fontFamily:'"Instrument Serif", serif',
            fontWeight:400,
            fontSize:'clamp(26px,3vw,42px)',
            lineHeight:1.22,
            color:'var(--ink)',
            letterSpacing:'-.005em',
            animation:'fadein .8s ease',
          }}>
            {cur.quote}
          </blockquote>
          <div style={{ display:'flex', alignItems:'center', gap:16, marginTop:36 }}>
            <div style={{
              width:46, height:46,
              border:'1px solid var(--accent)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:'"Big Shoulders Display"', fontWeight:800,
              color:'var(--accent)', fontSize:14, letterSpacing:'.08em',
            }}>{cur.mark}</div>
            <div>
              <div style={{ color:'var(--ink)', fontWeight:600, fontSize:15 }}>{cur.name}</div>
              <div className="mono mute" style={{ fontSize:11, marginTop:3 }}>{cur.role}</div>
            </div>
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {TESTIMONIALS.map((t, k) => (
            <button key={k} onClick={() => setI(k)} className="test-pick" style={{
              textAlign:'left',
              padding:'18px 20px',
              border:'1px solid ' + (k === i ? 'var(--accent)' : 'var(--hair)'),
              background: k === i ? 'rgba(200,122,74,.06)' : 'transparent',
              cursor:'default',
              color:'var(--ink-dim)',
              transition:'all .25s',
              fontFamily:'inherit',
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6 }}>
                <span className="mono" style={{ fontSize:10, letterSpacing:'.16em',
                  color: k === i ? 'var(--accent)' : 'var(--mute)' }}>VOICE / 0{k+1}</span>
                <span className="mono mute" style={{ fontSize:10 }}>{t.mark}</span>
              </div>
              <div style={{ color: k === i ? 'var(--ink)' : 'var(--ink-dim)', fontSize:13.5, fontWeight:500 }}>
                {t.name}
              </div>
              <div className="mono mute" style={{ fontSize:10.5, marginTop:3 }}>{t.role}</div>
            </button>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes fadein { from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
        @media (max-width: 900px){
          .test-grid{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </Section>
  );
}

/* ─────────── CONTACT / CTA ─────────── */
function Contact() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name:'', email:'', company:'', budget:'$50K – $150K', message:'' });
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <section id="contact" style={{
      position:'relative', padding:'clamp(90px,10vw,160px) 0 clamp(60px,7vw,100px)',
      borderTop:'1px solid var(--hair)',
      background:`
        radial-gradient(60% 80% at 80% 0%, rgba(200,122,74,.08), transparent 60%),
        radial-gradient(50% 70% at 10% 100%, rgba(200,122,74,.05), transparent 60%)
      `,
    }}>
      <div className="wrap" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr',
            gap:'clamp(32px,6vw,80px)', alignItems:'start' }} >
        <div className="contact-left">
          <div className="sect-label" style={{ marginBottom:30 }}>
            <span className="num">008 / CONTACT</span>
            <span className="bar"/>
            <span className="mono mute">REPLIES IN &lt; 24H</span>
          </div>
          <h2 className="display" style={{
            fontSize:'clamp(54px,8vw,140px)', margin:0, color:'var(--ink)',
          }}>
            Ready to <em>forge</em><br/> your market<br/> position?
          </h2>
          <p style={{ marginTop:30, maxWidth:480, color:'var(--ink-dim)', fontSize:17, lineHeight:1.55 }}>
            We take on a small number of engagements per quarter. Tell us about the brand,
            the gap, and the timeline. We'll respond with a sharp first read within a day.
          </p>
          <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:36 }}>
            <ContactLine label="EMAIL" value="studio@ironandink.co"/>
            <ContactLine label="STUDIO" value="125 Lafayette, Floor 6 — New York, NY"/>
            <ContactLine label="HOURS" value="Mon — Fri / 09:00 — 19:00 EST"/>
          </div>
        </div>

        <form onSubmit={submit} className="contact-form" style={{
          padding:'clamp(28px,3vw,40px)',
          border:'1px solid var(--hair-strong)',
          background:'linear-gradient(180deg, rgba(244,240,234,.025), rgba(244,240,234,.005))',
          position:'relative',
        }}>
          {/* corner ticks */}
          <CornerTicks/>

          {sent ? (
            <div style={{ padding:'40px 0', textAlign:'center' }}>
              <div className="display accent" style={{ fontSize:48, marginBottom:14 }}>RECEIVED.</div>
              <p style={{ color:'var(--ink-dim)' }}>Your brief is in the queue. Expect a reply from a partner within 24 hours.</p>
            </div>
          ) : (
          <>
            <div className="mono accent" style={{ fontSize:10.5, letterSpacing:'.18em', marginBottom:24 }}>BRIEF / NEW</div>

            <Field label="Your name">
              <input value={form.name} onChange={onChange('name')} placeholder="Margaux Reilly" required/>
            </Field>
            <Field label="Email">
              <input type="email" value={form.email} onChange={onChange('email')} placeholder="you@company.com" required/>
            </Field>
            <Field label="Company">
              <input value={form.company} onChange={onChange('company')} placeholder="Northwind Financial"/>
            </Field>
            <Field label="Engagement budget">
              <select value={form.budget} onChange={onChange('budget')}>
                <option>Under $50K</option>
                <option>$50K – $150K</option>
                <option>$150K – $500K</option>
                <option>$500K +</option>
              </select>
            </Field>
            <Field label="What are we forging?">
              <textarea value={form.message} onChange={onChange('message')} rows={4}
                        placeholder="The brand, the gap, the timeline."/>
            </Field>
            <button type="submit" className="btn btn-primary" style={{ width:'100%', justifyContent:'center', marginTop:6 }}>
              Send Brief <span className="arr">→</span>
            </button>
            <div className="mono mute" style={{ fontSize:10, marginTop:14, textAlign:'center', letterSpacing:'.12em' }}>
              ENCRYPTED · NO LISTS · NO FOLLOW-UPS WITHOUT CONSENT
            </div>
          </>
          )}
        </form>
      </div>

      <style>{`
        .contact-form input,
        .contact-form select,
        .contact-form textarea{
          width:100%;
          background:transparent;
          border:0;
          border-bottom:1px solid var(--hair-strong);
          color:var(--ink);
          padding:12px 0;
          font:inherit;
          font-size:15px;
          outline:none;
          transition:border-color .2s;
          border-radius:0;
          font-family:"Manrope", sans-serif;
        }
        .contact-form textarea{ resize:vertical; min-height:90px }
        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus{ border-bottom-color: var(--accent) }
        .contact-form input::placeholder,
        .contact-form textarea::placeholder{ color:var(--mute-2) }
        .contact-form select{ appearance:none; cursor:default;
          background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0' fill='none' stroke='%23c87a4a' stroke-width='1'/></svg>");
          background-repeat:no-repeat; background-position:right .5em center;
        }
        .contact-form select option{ background:#100e0b; color:var(--ink) }
        @media (max-width: 900px){
          #contact > .wrap{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </section>
  );
}

function ContactLine({ label, value }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:18 }}>
      <span className="mono accent" style={{ fontSize:10.5, letterSpacing:'.18em', minWidth:72 }}>{label}</span>
      <span style={{ color:'var(--ink)', fontSize:15 }}>{value}</span>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display:'block', marginBottom:18 }}>
      <div className="mono mute" style={{ fontSize:10, letterSpacing:'.18em', marginBottom:2 }}>{label.toUpperCase()}</div>
      {children}
    </label>
  );
}

function CornerTicks() {
  const tick = (pos) => ({
    position:'absolute', width:14, height:14,
    borderColor:'var(--accent)',
    borderStyle:'solid',
    borderWidth: pos.bw,
    ...pos.s,
  });
  return (
    <>
      <span style={tick({ bw:'1px 0 0 1px', s:{ top:-1, left:-1 } })}/>
      <span style={tick({ bw:'1px 1px 0 0', s:{ top:-1, right:-1 } })}/>
      <span style={tick({ bw:'0 0 1px 1px', s:{ bottom:-1, left:-1 } })}/>
      <span style={tick({ bw:'0 1px 1px 0', s:{ bottom:-1, right:-1 } })}/>
    </>
  );
}

/* ─────────── FOOTER ─────────── */
function Footer() {
  return (
    <footer style={{
      borderTop:'1px solid var(--hair)',
      padding:'48px 0 36px',
      position:'relative', zIndex:2,
    }}>
      <div className="wrap">
        <div className="display" style={{
          fontSize:'clamp(80px, 18vw, 260px)', color:'transparent',
          WebkitTextStroke:'1px var(--hair-strong)',
          lineHeight:.85, margin:'0 0 40px', letterSpacing:'-.02em',
        }}>
          IRON &amp; INK
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end',
                      flexWrap:'wrap', gap:24, borderTop:'1px solid var(--hair)', paddingTop:28 }}>
          <div className="mono mute" style={{ fontSize:11, letterSpacing:'.12em', textTransform:'uppercase' }}>
            © Iron &amp; Ink Studio LLC — Forged in New York
          </div>
          <div style={{ display:'flex', gap:24 }}>
            {['Instagram','LinkedIn','X / Twitter','Are.na'].map(s => (
              <a key={s} href="#" className="mono" style={{
                color:'var(--ink-dim)', textDecoration:'none', fontSize:11,
                letterSpacing:'.12em', textTransform:'uppercase',
              }}>{s}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ─────────── Generic Section wrapper ─────────── */
function Section({ id, num, label, title, children }) {
  return (
    <section id={id} style={{
      position:'relative', zIndex:2,
      padding:'clamp(80px, 9vw, 140px) 0',
      borderTop:'1px solid var(--hair)',
    }}>
      <div className="wrap">
        <div className="sect-label" style={{ marginBottom:30 }}>
          <span className="num">{num} / {label}</span>
          <span className="bar"/>
        </div>
        <h2 className="display" style={{
          fontSize:'clamp(40px,5.5vw,84px)', margin:'0 0 56px', color:'var(--ink)',
          maxWidth:1100, letterSpacing:'-.01em',
        }}>{title}</h2>
        {children}
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, Hero, About, Services, Work, Process, Metrics, Testimonials, Contact, Footer, Section,
});