// What I help with — no 'work' / 'working' phrasing
function WhatIHelpWith() {
  const items = [
  { n: '01', title: 'Brand clarity', body: 'Positioning, narrative, and identity. Named plainly, built end-to-end.' },
  { n: '02', title: 'Product clarity', body: 'What the product is for, what the first screen should feel like, what to stop building.' },
  { n: '03', title: 'Design leadership', body: 'Standing in as head of design while a team is forming, hiring, or repairing.' },
  { n: '04', title: 'Strategic direction', body: 'A second set of senior eyes during a rename, a raise, a pivot, or a reset.' },
  { n: '05', title: 'Systems thinking', body: 'Making brand, product, and experience sit together — across teams and touchpoints.' }];

  return (
    <div className="offerings">
      {items.map((it) =>
      <div key={it.n} className="offering">
          <span className="offering-index">{it.n}</span>
          <h3 className="offering-title">{it.title}</h3>
          <p className="offering-body">{it.body}</p>
        </div>
      )}
      <p className="offerings-note">
        I’m usually brought in when the business has moved forward, but the story, experience, and execution haven’t kept up.
      </p>
    </div>);

}
window.WhatIHelpWith = WhatIHelpWith;

// 48-Hour Signal Audit — focused tactical offering
function SignalAudit() {
  const bullets = [
  '5-part diagnostic review',
  'Annotated screenshots',
  'Trust + conversion observations',
  'Concise action summary',
  'Priority action list'];

  return (
    <div className="audit">
      <div className="audit-prose">
        <p className="audit-body audit-body--lead">A rapid diagnostic review for founders, startups, and teams whose brand, product, homepage, or digital presence feels unclear, undifferentiated, or misaligned.

        </p>
        <p className="audit-body">
          I identify where confidence breaks down across messaging, visual hierarchy, UX flow, and conversion psychology — then provide a short, actionable priority list.
        </p>
      </div>

      <ul className="audit-list" role="list">
        {bullets.map((b, i) =>
        <li key={i} className="audit-list-item">
            <span className="audit-list-num">{String(i + 1).padStart(2, '0')}</span>
            <span className="audit-list-text">{b}</span>
          </li>
        )}
      </ul>

      <dl className="audit-terms">
        <div className="audit-term">
          <dt>Turnaround</dt>
          <dd>48 hours</dd>
        </div>
        <div className="audit-term">
          <dt>Introductory rate</dt>
          <dd>$500</dd>
        </div>
      </dl>

      <div className="audit-actions">
        <a
          className="btn btn-primary"
          href="https://buy.stripe.com/7sY9AS8jWeZn1Rx0Fa1RC00"
          target="_blank"
          rel="noopener noreferrer">
          
          <span>Book Signal Audit</span>
          <span className="btn-arrow" aria-hidden="true">→</span>
        </a>
        <a className="btn-ghost" href="#audit-sample">View sample audit</a>
      </div>
    </div>);

}
window.SignalAudit = SignalAudit;

// Sample Observation — companion example for the Signal Audit
function SampleObservation() {
  const layers = [
  'Aspiration',
  'Guided reassurance',
  'Product escalation',
  'Human support',
  'Informational fallback'];

  return (
    <div className="sample">
      <figure className="sample-figure">
        <div className="sample-frame">
          <img
            src="assets/sample-audit-godaddy.png"
            alt="GoDaddy homepage — annotated audit reference"
            loading="lazy" />
          
        </div>
        <figcaption className="sample-caption">
          <span>Fig. 01</span>
          <span>GoDaddy homepage · captured for audit reference</span>
        </figcaption>
      </figure>

      <div className="sample-analysis">
        <h3 className="sample-headline">GoDaddy — Homepage Confidence Architecture</h3>

        <p className="sample-body sample-body--lead">
          This homepage reflects a layered conversion psychology system designed to preserve user confidence across the scroll journey.
        </p>

        <p className="sample-body">The structure progressively transitions from:</p>

        <ol className="sample-layers" role="list">
          {layers.map((l, i) =>
          <li key={i} className="sample-layer">
              <span className="sample-layer-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="sample-layer-text">{l}</span>
            </li>
          )}
        </ol>

        <p className="sample-body">
          The Guides/CSR layer functions as a human confidence bridge before users descend into FAQ/support resolution states.
        </p>

        <p className="sample-body sample-body--close">
          The underlying behavioral model recognizes that most hesitation is not caused by lack of interest, but by lack of certainty.
        </p>
      </div>
    </div>);

}
window.SampleObservation = SampleObservation;

// Selected engagements — Robin's copy
function SelectedWork() {
  const work = [
  {
    n: '01',
    title: 'Confidential Infrastructure Program',
    meta: 'Confidential · Strategic direction · Brand, product, narrative',
    situation: 'A multi-context infrastructure program spanning civilian payments and government-adjacent systems, with real technical depth but no coherent external story, trust framework, or shared language across teams.',
    intervention: 'Defined the narrative architecture, clarified what the program actually was, and aligned brand, product, and communication surfaces around it. Shaped visual output, audience framing, and internal understanding across a security-sensitive environment.',
    shift: 'The program moved from fragmented internal interpretation to a clearer, more credible system that could be understood, positioned, and discussed across multiple operational contexts.'
  },
  {
    n: '02',
    title: 'DeepGreenX',
    meta: 'AI infrastructure · Design buildout · Strategic and visual systems',
    situation: 'An AI and sustainability venture with ambition, technical narrative, and investor pressure — but no real design direction, no coherent system, and no usable structure for external communication.',
    intervention: 'Built the creative layer from scratch: decks, one-pagers, visual language, core narrative materials, brand logic, internal file structure, and external-facing assets including launch-level presentation material.',
    shift: 'What had been thin, inconsistent, and under-articulated became a usable system for investor, partner, and public communication — with enough coherence to support real business movement.'
  },
  {
    n: '03',
    title: 'GoDaddy',
    meta: '2014–2019 · Design leadership · Front-of-site · Brand and operational scale',
    situation: 'A company scaling through a major transformation era, spanning pre-IPO and post-IPO realities, with customer experience, brand expression, and internal creative operations all under pressure at significant scale.',
    intervention: 'Led creative strategy across front-of-site experience alongside marketing, product, experimentation, executive visibility, and creative operations. Helped shape customer-facing experience, internal standards, and brand evolution across business units and locations.',
    shift: 'A stronger, more coherent front-end brand and customer experience system inside a company moving from billion-dollar scale to materially larger global ambition.'
  },
  {
    n: '04',
    title: 'Lime',
    meta: 'Founding-stage consulting · Early brand and digital direction',
    situation: 'A founding-stage mobility company entering an emerging and highly competitive category before the market had settled, with major questions around identity, launch clarity, and how the product should present itself digitally.',
    intervention: 'Partnered with the founding team on early direction, including the first website, brand validation, naming and logo judgment, launch sensibility, and the shape of Lime’s first public-facing digital presence.',
    shift: 'The company moved from early-stage ambiguity to a more coherent launch posture during the formative moment of the micromobility category.'
  },
  {
    n: '05',
    title: 'Havoc',
    meta: 'Strategic counterpart role · Brand direction · Executive advisory',
    situation: 'A high-output content company with real execution strength, but a brand and leadership narrative that needed sharpening as the business matured.',
    intervention: 'Served as a close strategic counterpart to leadership, shaping direction across brand, positioning, and creative framing. Helped define how the company described itself and how its identity held together as it evolved.',
    shift: 'Greater internal and external coherence — not just stronger output, but a clearer sense of what the company was and how it should move.'
  }];

  const [open, setOpen] = React.useState(null);
  const toggle = (n) => setOpen((cur) => cur === n ? null : n);
  return (
    <div className="work-list">
      {work.map((w) => {
        const isOpen = open === w.n;
        return (
          <article key={w.n} className="work-row" data-open={isOpen}>
            <button
              className="work-head"
              onClick={() => toggle(w.n)}
              aria-expanded={isOpen}
              aria-controls={`work-body-${w.n}`}>
              
              <span className="work-num">— {w.n}</span>
              <h3 className="work-title">{w.title}</h3>
              <span className="work-meta">{w.meta}</span>
              <span className="work-toggle" aria-hidden="true">+</span>
            </button>
            <div className="work-body" id={`work-body-${w.n}`} role="region">
              <div className="work-body-inner">
                <dl className="work-facts">
                  <dt>Situation</dt>
                  <dd>{w.situation}</dd>
                  <dt>Intervention</dt>
                  <dd>{w.intervention}</dd>
                  <dt>Shift</dt>
                  <dd>{w.shift}</dd>
                </dl>
              </div>
            </div>
          </article>);

      })}
      <p className="work-note">Materials shared on request.</p>
    </div>);

}
window.SelectedWork = SelectedWork;

// How I work — single paragraph, Robin's copy
function HowIWork() {
  return (
    <div className="how-body" style={{ width: "583px", maxWidth: "100%" }}>
      <p className="how-body-p">
        I collaborate best with good, honest people building something real. My purpose is to bring <em>clarity, structure, and momentum</em> across brand, product, and experience — especially when things feel fragmented, complex, or out of sync.
      </p>
      <p className="how-body-p">
        I’m hands-on, direct, and collaborative, and I care as much about the quality of the output as I do about the people around it.
      </p>
    </div>);

}
window.HowIWork = HowIWork;

// Contact
function Contact({ showForm }) {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [fields, setFields] = React.useState({ name: '', email: '', note: '' });
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!fields.email || !fields.note) return;
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/xwvybgon', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: fields.name,
          email: fields.email,
          message: fields.note,
          _subject: `New inquiry from ${fields.name || fields.email}`,
          _replyto: fields.email
        })
      });
      if (res.ok) {
        setStatus('sent');
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };
  return (
    <div className="contact">
      <div>
        <p className="contact-lead">
          If you’re building something important and need clarity, I’d be glad to hear more.
        </p>
        <div className="contact-email-row">
          <a href="mailto:hello@robinbarrow.com" className="contact-email">hello@robinbarrow.com</a>
          <span className="contact-reply">Replies within 2 business days</span>
        </div>
        <div className="contact-meta">
          <span>Based in Nashville</span>
          <span>Available globally</span>
        </div>

        {showForm && status !== 'sent' &&
        <form className="form" onSubmit={onSubmit}>
            <div className="form-row">
              <label htmlFor="f-name" className="form-label">Name</label>
              <input id="f-name" className="form-input" type="text" autoComplete="name"
            value={fields.name} onChange={(e) => setFields({ ...fields, name: e.target.value })} />
            </div>
            <div className="form-row">
              <label htmlFor="f-email" className="form-label">Email</label>
              <input id="f-email" className="form-input" type="email" autoComplete="email" required
            value={fields.email} onChange={(e) => setFields({ ...fields, email: e.target.value })} />
            </div>
            <div className="form-row">
              <label htmlFor="f-note" className="form-label">Brief note</label>
              <textarea id="f-note" className="form-textarea" required rows={3}
            placeholder="A few lines on the situation, the engagement, or what you’re exploring."
            value={fields.note} onChange={(e) => setFields({ ...fields, note: e.target.value })} />
            </div>
            <div className="form-actions">
              <span className="form-note">
                {status === 'error' ?
              'Something went wrong — please email directly.' :
              'Or just email — either is fine.'}
              </span>
              <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
                <span>{status === 'sending' ? 'Sending…' : 'Send'}</span>
                <span className="btn-arrow" aria-hidden="true">→</span>
              </button>
            </div>
          </form>
        }
        {showForm && status === 'sent' &&
        <div className="form-sent">Thanks — I’ll reply within two business days.</div>
        }
      </div>
    </div>);

}
window.Contact = Contact;