// cr-bottom.jsx — People, Cadence, Work, About, Closing, Footer

/* ================= SHOWCASE (before / after comparison) ================= */
function Showcase({ tone }){
  return (
    <section className={"sec "+tone+" showcase"} id="showcase">
      <FloatShapes variant="b"/>
      <div className="wrap">
        <div className="show-head">
          <h2 className="h-sect" data-reveal>From piecing it together to <em>one clear view.</em></h2>
          <p className="lede" data-reveal style={{"--reveal-delay":"0.1s"}}>
            Most teams reconcile the truth by hand: a spreadsheet here, a PDF there, an email thread, a half-dozen tools that each tell a different story. We replace all of it with one screen, built around your business and current to this morning.
          </p>
        </div>
        <div className="compare">
          <div className="cmp-side cmp-before" data-reveal="left">
            <div className="cmp-label"><span className="cmp-tag before">Today</span>Piecing it together</div>
            <ChaosStack/>
          </div>
          <div className="cmp-arrow" data-reveal aria-hidden="true">
            <svg viewBox="0 0 60 24" fill="none"><path className="cmp-arrow-line" d="M2 12 H 52 M44 5 L 56 12 L 44 19" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div className="cmp-side cmp-after" data-reveal="right" style={{"--reveal-delay":"0.15s"}}>
            <div className="cmp-label"><span className="cmp-tag after">With Crenshaw</span>One clear view</div>
            <DashboardMockup/>
          </div>
        </div>
        <p className="show-note" data-reveal>Illustrative. Every dashboard we build is shaped around the questions you actually ask.</p>
      </div>
    </section>
  );
}

/* ================= PEOPLE-FIRST ================= */
function PeopleMark(){
  const nodes=[[60,70],[130,48],[190,92],[92,150],[170,170]];
  return (
    <svg className="mark-big people-mark" viewBox="0 0 240 240" fill="none" aria-hidden="true">
      {/* a constellation of nodes — "behind every point, a person" */}
      <g className="pm-lines" stroke="currentColor" strokeWidth="1.4" strokeOpacity="0.5">
        <line x1="60" y1="70" x2="130" y2="48"/><line x1="130" y1="48" x2="190" y2="92"/>
        <line x1="60" y1="70" x2="92" y2="150"/><line x1="92" y1="150" x2="170" y2="170"/>
        <line x1="170" y1="170" x2="190" y2="92"/><line x1="92" y1="150" x2="130" y2="48"/>
        <line x1="170" y1="170" x2="130" y2="48"/>
      </g>
      {nodes.map((p,i)=>(
        <g key={i}>
          <circle className="pm-halo" style={{animationDelay:`${i*0.5}s`}}
            cx={p[0]} cy={p[1]} r="13" fill="#82B1FF" fillOpacity="0.16"/>
          <circle className="pm-node" style={{animationDelay:`${i*0.5}s`}}
            cx={p[0]} cy={p[1]} r="5" fill="currentColor"/>
        </g>
      ))}
    </svg>
  );
}
function People({ tone }){
  return (
    <section className={"sec "+tone} id="people">
      <div className="wrap people">
        <div className="people-grid">
          <div>
            <p className="pull" data-reveal style={{"--reveal-delay":"0.08s"}}>
              The hard part isn't building it. It's getting it <em>used.</em>
            </p>
            <p className="body" data-reveal style={{"--reveal-delay":"0.2s",marginLeft:0,maxWidth:"600px"}}>
              Most data work fails quietly. It ships, and no one opens it. People don't resist the numbers; they resist being measured by a tool they had no say in. So we roll out with intention: the people who'll live in the dashboards help build them, and adoption is designed in from the start, not hoped for at launch.
            </p>
          </div>
          <div className="people-media" data-reveal="right" style={{"--reveal-delay":"0.16s"}}>
            <PeopleMark/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= CLOSENESS / COLLABORATION ================= */
const VALUES = [
  { t:"In the week with you", d:"Regular working sessions and fast answers. Momentum that doesn't stall waiting on a ticket queue." },
  { t:"Built alongside your team", d:"The people who'll live in the dashboards help shape them. That's how real adoption happens, not as an afterthought." },
  { t:"Nothing behind a curtain", d:"You always know what's moving, what's next, and why. Clear, written, and in plain language." },
];
function Cadence({ tone }){
  return (
    <section className={"sec "+tone} id="cadence">
      <div className="wrap collab">
        <div className="collab-head">
          <h2 className="h-sect" data-reveal>Good data work isn't handed off. It's built close.</h2>
          <p className="lede" data-reveal style={{"--reveal-delay":"0.1s"}}>
            Not a vendor you email and wait on. A partner in the week with you, building alongside the people who'll actually use what we make. Distance is where data projects quietly fail. Closeness is why ours don't.
          </p>
        </div>
        <div className="collab-grid">
          {VALUES.map((v,i)=>(
            <div className="collab-item" key={v.t} data-reveal style={{"--reveal-delay":`${i*0.12}s`}}>
              <h3 className="h-display">{v.t}</h3>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= SELECTED WORK ================= */
function WorkViz({ kind }){
  const s = { fill:"none", stroke:"currentColor", strokeWidth:2, strokeLinecap:"round", strokeLinejoin:"round" };
  if(kind===0) return <svg viewBox="0 0 320 160" {...s}><path d="M30 120 L90 90 L150 100 L210 55 L290 30"/><circle cx="290" cy="30" r="4" fill="currentColor"/><line x1="30" y1="140" x2="290" y2="140" strokeOpacity="0.3"/></svg>;
  if(kind===1) return <svg viewBox="0 0 320 160" {...s}><rect x="40" y="80" width="34" height="50" rx="3"/><rect x="92" y="55" width="34" height="75" rx="3"/><rect x="144" y="68" width="34" height="62" rx="3"/><rect x="196" y="38" width="34" height="92" rx="3"/><rect x="248" y="58" width="34" height="72" rx="3"/></svg>;
  return <svg viewBox="0 0 320 160" {...s}><circle cx="80" cy="80" r="34"/><circle cx="200" cy="55" r="20"/><circle cx="230" cy="115" r="14"/><line x1="110" y1="72" x2="182" y2="60"/><line x1="100" y1="98" x2="220" y2="110"/></svg>;
}
const WORK = [
  { tag:"PE-backed · Services", thumb:"Operational dashboard",
    copy:"A 40-person PE-backed services business consolidated three CRMs into one operational dashboard. Sunday spreadsheet time: gone. Margin visibility: weekly, not quarterly." },
  { tag:"Higher Education", thumb:"Enrollment + aid model",
    copy:"A regional university unified enrollment, financial aid, and retention data, so leadership could see a class form in real time instead of after census day." },
  { tag:"Civic · Multi-org", thumb:"Shared data product",
    copy:"A coalition of local organizations stood up a shared civic data platform: one trusted source feeding grant reporting that used to take weeks to assemble." },
];
function Work({ tone }){
  return (
    <section className={"sec "+tone} id="work">
      <div className="wrap">
        <div className="work-head">
          <div data-reveal>
            <h2 className="h-sect">Outcomes, not case-study theater.</h2>
          </div>
          <span className="arrow-link" data-reveal style={{"--reveal-delay":"0.1s"}}>View all work <Arrow/><span className="line"/></span>
        </div>
        <div className="work-grid">
          {WORK.map((w,i)=>(
            <a className="work-card" key={i} href="#contact" onClick={startConversation}
               data-reveal style={{"--reveal-delay":`${i*0.12}s`}}>
              <div className="work-thumb">
                <WorkViz kind={i}/>
                <span className="ph-label">[ portfolio visual ]</span>
              </div>
              <div className="work-body">
                <div className="work-tag">{w.tag}</div>
                <p className="work-copy">{w.copy}</p>
                <div className="work-foot"><span className="arrow-link">Read the full case <Arrow/><span className="line"/></span></div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= ABOUT ================= */
function About({ tone }){
  return (
    <section className={"sec "+tone} id="about">
      <div className="wrap about">
        <div className="about-grid">
          <div data-reveal="left">
            <h2 className="h-sect" style={{fontSize:"clamp(28px,3.4vw,42px)"}}>Run by the person who builds it.</h2>
          </div>
          <div data-reveal="right" style={{"--reveal-delay":"0.1s"}}>
            <p className="body">
              Crenshaw Analytics is based in <b>Monroe, Louisiana</b>, and works with clients across the country.
              Founded and led by <b>Michael Crenshaw</b>, who believes the right dashboard is the one that
              actually drives decisions, not the one that sits on a shelf.
            </p>
            <div className="about-card" style={{marginTop:"32px"}}>
              <div className="ac-mesh"/>
              <div className="ac-head">
                <img className="ac-photo" src="assets/founder-sq.jpg" alt="Michael Crenshaw" />
                <div>
                  <div className="ac-kick">Founder</div>
                  <div className="ac-name h-display">Michael Crenshaw</div>
                  <div className="ac-role">CEO · Crenshaw Analytics</div>
                </div>
              </div>
              <div className="ac-loc"><span className="pin"/>Monroe, Louisiana &middot; Clients nationwide</div>
            </div>
            <div className="about-foot"><a className="arrow-link" href="#contact" onClick={startConversation}>Learn more about us <Arrow/><span className="line"/></a></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= CLOSING ================= */
function Closing(){
  return (
    <section className="sec sec--navy deep closing" id="contact">
      <div className="closing-mesh"/>
      <div className="wrap closing-inner">
        <h2 data-reveal style={{"--reveal-delay":"0.08s"}}>Ready to see how your data can <em>work for you?</em></h2>
        <div className="closing-cta" data-reveal style={{"--reveal-delay":"0.2s"}}>
          <a className="btn btn-primary" href="#contact" onClick={startConversation} style={{fontSize:"17px",padding:"17px 30px"}}>
            Start a conversation <Arrow/>
          </a>
        </div>
        <p className="deming" data-reveal style={{"--reveal-delay":"0.3s"}}>
          “Without data, you're just another person with an opinion.”
          <span className="cite">W. Edwards Deming</span>
        </p>
      </div>
    </section>
  );
}

/* ================= FOOTER ================= */
function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <Brand/>
            <p className="f-tag">A data partnership for mid-market companies past spreadsheets, ready to lead with their numbers.</p>
          </div>
          <div className="f-col">
            <h4>Explore</h4>
            <a href="#primer">How it works</a>
            <a href="#pillars">Services</a>
            <a href="#cadence">Approach</a>
            <a href="#about">About</a>
          </div>
          <div className="f-col">
            <h4>Connect</h4>
            <a href="#contact" onClick={startConversation}>Start a conversation</a>
            <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="loc"><span className="pin"/>Monroe, Louisiana · Clients nationwide</div>
          <div>© 2026 Crenshaw Analytics</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Showcase, People, Cadence, Work, About, Closing, Footer });