/* Components for Cre8 Your Success home
   Loaded via <script type="text/babel" src="components.jsx"></script> */

const { useState, useEffect, useRef } = React;

/* ── Logo mark: stylized "c8" infinity loop from the brand sheet ── */
function LogoMark({ size = 30 }) {
  return (
    <svg className="logo-mark" width={size} height={size} viewBox="0 0 60 60" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id="lm-o" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#FF8833" />
          <stop offset="100%" stopColor="#FF6600" />
        </linearGradient>
        <linearGradient id="lm-b" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#0066FF" />
          <stop offset="100%" stopColor="#0052CC" />
        </linearGradient>
      </defs>
      {/* blue loop (the "8") */}
      <circle cx="38" cy="36" r="14" stroke="url(#lm-b)" strokeWidth="5" fill="none" />
      {/* orange loop with arrow (the "c" with arrow) */}
      <path
        d="M 38 22 A 14 14 0 1 0 22 36"
        stroke="url(#lm-o)"
        strokeWidth="5"
        fill="none"
        strokeLinecap="round" />
      
      {/* arrow head */}
      <path d="M 38 22 L 46 22 L 46 14 M 46 22 L 38 14" stroke="url(#lm-o)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>);

}

/* ── Nav ── */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 640;
  return (
    <nav className="site-nav" style={{ background: scrolled ? 'rgba(10,10,10,0.94)' : 'rgba(10,10,10,0.75)', height: isMobile ? "64px" : "90px" }}>
      <div className="nav-left">
        <a href="#" className="nav-wordmark" aria-label="Cre8 Your Success">
          <img src="assets/logo-horizontal.png?v=3" alt="Cre8 Your Success" style={{ display: 'block', height: isMobile ? "44px" : "80px", maxWidth: isMobile ? "160px" : "none", objectFit: "contain" }} />
        </a>
        <ul className="nav-menu">
          <li className="nav-item has-dropdown">
            <a href="#features">Services</a>
            <div className="nav-dropdown">
              <div className="nav-dropdown-inner">
                <span className="nav-dd-item">Workflow Automation</span>
                <span className="nav-dd-item">Lead Generation</span>
                <span className="nav-dd-item">Voice Agents</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div className="nav-right">
        <a href="https://scholarpath.cre8yoursuccess.com" className="nav-cta-secondary" style={{color:'#1E90FF', borderColor:'#1E90FF'}}>✦ ScholarPath</a>
        <a href="https://calendly.com/michael-cre8yoursuccess/30min" target="_blank" rel="noopener" className="nav-cta">Book a Consult →</a>
      </div>
    </nav>);

}

/* ── Hero ── */
const HEADLINES = {
  outcome: {
    pre: <span>Automate the busywork<br />that slows your <span className="accent-o">team</span> down.</span>,
    sub: "Cre8 Your Success builds AI workflow automation for B2B and professional-services firms. We take the manual, repeatable work eating your team's hours and turn it into a system that runs on its own. Built by a delivery leader who has shipped software inside regulated financial-services companies."
  },
  product: {
    pre: <span>The workflow that<br />runs <span className="accent-o">itself.</span></span>,
    sub: "Quoting, onboarding, follow-ups, reporting. If your team is copy-pasting between tabs, that is a workflow we can automate end to end and wire into the tools you already use."
  },
  trust: {
    pre: <span>Stop paying people<br />to do <span className="accent-o">robot work.</span></span>,
    sub: "We find the repeatable, manual work draining your team's hours and turn it into automation that runs while you focus on the business. Built by a delivery leader from regulated financial services."
  }
};

function Hero({ variant = 'outcome' }) {
  const v = HEADLINES[variant] || HEADLINES.outcome;
  const videoRef = useRef(null);

  return (
    <section className="hero" id="hero">
      <div className="hero-bg"></div>
      <div className="hero-grid"></div>

      <div className="hero-content">
        <div className="hero-text">
          <h1 className="hero-title">{v.pre}</h1>
          <p className="hero-sub">{v.sub}</p>
          <div className="hero-cta">
            <a href="#pilot" className="btn-primary">
              Start Your First Workflow
              <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </div>
          <div className="hero-stats">
            <div>
              <div className="hero-stat-num">30<span className="unit"> days</span></div>
              <div className="hero-stat-label">To a working automation</div>
            </div>
            <div>
              <div className="hero-stat-num">Fixed</div>
              <div className="hero-stat-label">Price, scoped up front</div>
            </div>
            <div>
              <div className="hero-stat-num">$0<span className="unit"></span></div>
              <div className="hero-stat-label">If it doesn't ship</div>
            </div>
          </div>
        </div>

        <div className="hero-video-wrap">
          <div className="hero-video-frame">
            <video ref={videoRef} autoPlay loop muted playsInline>
              <source src="assets/hero.mp4" type="video/mp4" />
            </video>
          </div>
          <div className="hero-video-glow"></div>
        </div>

      </div>
    </section>);

}

/* ── Marquee brand bar ── */
function BrandBar() {
  const items = ['Automate', 'Scale', 'Succeed', 'Voice Agents', 'Lead Gen', 'Workflows', 'Integrations', 'Analytics'];
  const row = [...items, ...items, ...items];
  return (
    <div className="brand-bar" style={{ backgroundColor: "rgb(13, 17, 23)" }}>
      <div className="marquee">
        {row.map((t, i) =>
        <React.Fragment key={i}>
            <span>{t}</span>
            <span className="dot">◆</span>
          </React.Fragment>
        )}
      </div>
    </div>);

}

/* ── How it works ── */
function HowItWorks() {
  const steps = [
  {
    step: '01',
    title: 'Map your ops',
    desc: 'We map your team’s repeatable work, the tools it lives in, and where the hours are leaking, then pick the workflow with the highest payback.',
    icon:
    <svg viewBox="0 0 28 28" fill="none" stroke="#FF6600" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="14" cy="14" r="10" /><path d="M14 4v20M4 14h20M7 7l14 14M21 7L7 21" /></svg>

  },
  {
    step: '02',
    title: 'Design your system',
    desc: 'We map the workflow end to end and define exactly how it should run: the triggers, the steps, the integrations, and the handoffs, all spec\'d before a line of code.',
    icon:
    <svg viewBox="0 0 28 28" fill="none" stroke="#0066FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="3" width="18" height="22" rx="4" /><path d="M10 10h8M10 14h8M10 18h5" /><circle cx="20" cy="18" r="2" fill="#0066FF" /></svg>

  },
  {
    step: '03',
    title: 'Ship & scale',
    desc: 'We launch, monitor, and tune week over week. As you grow we layer in more workflows, lead-gen, and follow-up on the same stack.',
    icon:
    <svg viewBox="0 0 28 28" fill="none" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 22l8-8 4 4 8-10" /><path d="M16 8h8v8" /></svg>

  }];

  return (
    <section className="section section-dark" id="how" style={{ backgroundColor: "rgb(25, 32, 44)" }}>
      <div className="container">
        <div className="eyebrow">How it works</div>
        <h2 className="section-title">Three steps.<br />From manual to automated.</h2>
        <p className="section-sub">We're an automation agency, not a SaaS. You get a dedicated build team, a custom-trained stack, and a partner that stays in the loop after launch.</p>
        <div className="how-grid">
          {steps.map((s, i) =>
          <div className="how-card" key={i}>
              <div className="how-step">{s.step}</div>
              <div className="how-glyph">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── Features bento grid ── */
function Features() {
  return (
    <section className="section section-darker" id="features" style={{ backgroundColor: "rgb(13, 17, 23)" }}>
      <div className="container">
        <div className="eyebrow">What we build</div>
        <h2 className="section-title">Automation that removes<br />the work, not just the calls.</h2>
        <p className="section-sub">Workflow automation first, then lead-gen and voice on the same stack. Start with one workflow. Grow into the rest.</p>

        <div className="feat-grid">
          {/* Workflow Automation */}
          <div className="feat sm3" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">WORKFLOWS</span>
            <h3>Workflow Automation</h3>
            <p>Remove manual work and scale operations across the tools you already use.</p>
            <div className="integrations" style={{paddingTop:14}}>
              <span className="integ"><span className="d on"></span>Trigger</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Action</span>
              <span className="integ"><span className="d on"></span>Follow-up</span>
            </div>
          </div>

          {/* Lead Generation */}
          <div className="feat sm2" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">LEADS</span>
            <h3>Lead Generation</h3>
            <p>Consistent, automated lead flow without chasing. Capture, qualify, and follow up in seconds.</p>
            <div className="integrations" style={{paddingTop:14}}>
              <span className="integ"><span className="d on"></span>Capture</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Qualify</span>
              <span className="integ"><span className="d on"></span>Route</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Follow-up</span>
            </div>
          </div>

          {/* AI Voice Agents — small box */}
          <div className="feat sm" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">VOICE</span>
            <h3>AI Voice Agents</h3>
            <p>When calls matter, an AI voice agent picks up in the first ring, qualifies the lead, books the appointment, and hands off to a human when it counts.</p>
            <div className="integrations" style={{paddingTop:14}}>
              <span className="integ"><span className="d on"></span>Answer</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Qualify</span>
              <span className="integ"><span className="d on"></span>Book</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Hand-off</span>
            </div>
          </div>

          {/* Integrations */}
          <div className="feat sm4" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">STACK</span>
            <h3>Connects to your tools</h3>
            <p>We plug into your CRM, calendar, phone system, and spreadsheets.</p>
            <div className="integrations">
              <span className="integ"><span className="d on"></span>HubSpot</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>GoHighLevel</span>
              <span className="integ"><span className="d on"></span>Twilio</span>
              <span className="integ"><span className="d" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Salesforce</span>
              <span className="integ"><span className="d on"></span>Google Cal</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Slack</span>
              <span className="integ"><span className="d on"></span>Stripe</span>
              <span className="integ"><span className="d" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Zapier</span>
            </div>
          </div>

          {/* Transparent: honest capability, no invented metrics */}
          <div className="feat half" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">TRANSPARENT</span>
            <h3>Every run, logged</h3>
            <p>You get a written definition of done and a record of every automated run. No black box, no guessing whether it worked.</p>
            <div className="integrations" style={{paddingTop:14}}>
              <span className="integ"><span className="d on"></span>Defined</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Logged</span>
              <span className="integ"><span className="d on"></span>Reported</span>
            </div>
          </div>

          {/* Ownership: honest capability, no invented data */}
          <div className="feat half" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">YOURS</span>
            <h3>You own it</h3>
            <p>The automation runs on your tools and your accounts. If we ever part ways, it keeps working. No lock-in, no rented black box.</p>
            <div className="integrations" style={{paddingTop:14}}>
              <span className="integ"><span className="d on"></span>Your tools</span>
              <span className="integ"><span className="d on" style={{ backgroundColor: "rgb(0, 102, 255)" }}></span>Your data</span>
              <span className="integ"><span className="d on"></span>No lock-in</span>
            </div>
          </div>

          {/* Wide: Custom workflows */}
          <div className="feat wide" style={{ backgroundColor: "rgb(6, 8, 11)" }}>
            <span className="tag">MODULAR</span>
            <h3>Custom workflow automations</h3>
            <p style={{ maxWidth: 640 }}>Beyond the first workflow, we build whatever repeatable, back-office work is eating your team's hours. Quoting, follow-ups, review requests, onboarding, reporting. If a human is copy-pasting between tabs, we can replace that loop.</p>
            <div className="viz-stack">
              {['INTAKE', 'QUOTE', 'SEND', 'FOLLOW', 'SIGN', 'BILL', 'NOTIFY', 'ARCHIVE'].map((t, i) =>
              <div className="stack-cell" key={i}>{t}</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── CTA band ── */
function CtaBand() {
  return (
    <section className="cta-band" id="cta">
      <div className="cta-inner">
        <h2>Book your <span className="accent">free consult.</span></h2>
        <p>A 30-minute look at the manual work eating your team’s hours, where the time is going, and exactly what your first workflow would take off their plate. Fixed-scope plan, no pricing surprises.</p>
        <div className="cta-btns">
          <a href="https://calendly.com/michael-cre8yoursuccess/30min" target="_blank" rel="noopener" className="btn-primary">
            Book a Consult
            <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
    </section>);

}

/* ── Industries served (non-clickable list) ── */
function Industries() {
  const items = [
    'Financial Services', 'Insurance', 'Professional Services', 'Legal & Law Firms',
    'Accounting & Finance Ops', 'Agencies & Consultancies', 'B2B SaaS', 'Real Estate & Property Mgmt',
    'Healthcare Admin', 'Operations Teams', 'Back-Office & Intake', 'Compliance-Heavy Teams'
  ];
  return (
    <section className="section section-darker industries-section">
      <div className="container">
        <div className="eyebrow">Who we build for</div>
        <h2 className="section-title">Built for operations-heavy<br />B2B and service firms.</h2>
        <p className="section-sub">If your team runs on repeatable, manual work spread across a stack of tools, that is what we automate. We come out of years inside regulated, process-heavy financial-services operations, so complex back-office work is home turf.</p>
        <div className="ind-grid">
          {items.map((t, i) => (
            <div className="ind-pill" key={i}>{t}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Footer ── */
function Footer() {
  return (
    <footer className="site-footer" style={{ backgroundColor: "rgb(13, 17, 23)" }}>
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="footer-logo">
            <img src="assets/logo-horizontal.png?v=3" alt="Cre8 Your Success" style={{ height: 64, display: 'block' }} />
          </div>
          <p>An automation partner for operators. We build the stack we lead with: workflow automation, lead-gen, and voice, so revenue keeps moving while you focus on the work.</p>
        </div>
        <div className="footer-col">
          <h4>Services</h4>
          <ul>
            <li><span>Workflow Automation</span></li>
            <li><span>Lead Generation</span></li>
            <li><span>Voice Agents</span></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Cre8 Your Success. All systems operational.</span>
        <div className="socials">
          <a href="https://www.linkedin.com/company/cre8-your-success-llc/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M3.6 5.4h2.5v7.8H3.6V5.4zM4.9 2.2a1.4 1.4 0 100 2.9 1.4 1.4 0 000-2.9zM7.7 5.4h2.4v1.1h.04c.3-.6 1.2-1.3 2.4-1.3 2.5 0 3 1.7 3 3.9v4h-2.5V9.5c0-1 0-2.2-1.3-2.2s-1.6 1-1.6 2.2v3.8H7.7V5.4z" /></svg></a>
        </div>
      </div>
    </footer>);

}

/* ── The offer: 30-Day Automation Pilot ── */
function AutomationPilot() {
  const cards = [
    { t: 'One workflow, done right', d: 'We pick the single workflow draining the most hours and automate it completely, not halfway.' },
    { t: 'Wired into your stack', d: 'It connects to the CRM, calendar, sheets, and tools your team already uses. No rip-and-replace.' },
    { t: 'A written definition of done', d: 'We agree on exactly what working means before we start. No moving goalposts.' },
    { t: 'Ships, or you owe nothing', d: 'If it does not hit the done-criteria, you do not pay. The risk is ours, not yours.' },
  ];
  return (
    <section className="section pilot-section" id="pilot" style={{ backgroundColor: "rgb(13, 17, 23)" }}>
      <div className="container">
        <div className="eyebrow">The Offer</div>
        <h2 className="section-title">The First<br />Workflow.</h2>
        <p className="section-sub">One workflow, automated in 30 days. Fixed scope, fixed price, and a written definition of done. It ships and works, or you owe nothing.</p>
        <div className="pilot-grid">
          {cards.map((c, i) => (
            <div className="pilot-card" key={i}>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
        <div className="pilot-cta">
          <a href="https://calendly.com/michael-cre8yoursuccess/30min" target="_blank" rel="noopener" className="btn-primary">
            See if your workflow fits
            <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
    </section>);
}

/* ── Workflow demo (representative, DOM-animated) ── */
function WorkflowDemo() {
  const stages = ['INTAKE', 'DRAFT QUOTE', 'SEND', 'FOLLOW-UP', 'LOGGED'];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % stages.length), 1100);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section demo-section" id="demo" style={{ backgroundColor: "rgb(10,10,10)" }}>
      <div className="container">
        <div className="eyebrow">See it run</div>
        <h2 className="section-title">What a shipped<br />automation looks like.</h2>
        <p className="section-sub">A quote-and-follow-up workflow running on its own. Intake comes in, the system drafts the quote, sends it, follows up, and logs everything. No one touches a keyboard.</p>
        <div className="demo-pipe">
          {stages.map((s, i) => (
            <React.Fragment key={s}>
              <div className={"demo-node" + (i === active ? " on" : "")}>
                <span className="demo-dot"></span>{s}
              </div>
              {i < stages.length - 1 && <div className={"demo-link" + (i < active ? " on" : "")}></div>}
            </React.Fragment>
          ))}
        </div>
        <div className="demo-caption">Representative workflow. Your pilot is built on your real process and tools.</div>
      </div>
    </section>);
}

/* ── Built by: founder credibility ── */
function BuiltBy() {
  const creds = ['10+ yrs enterprise delivery', 'MBA, Project Management', 'Advanced Certified Scrum Product Owner', 'Salesforce Certified Administrator'];
  return (
    <section className="section builtby-section" style={{ backgroundColor: "rgb(13,17,23)" }}>
      <div className="container builtby-grid">
        <div className="builtby-copy">
          <div className="eyebrow">Built by</div>
          <h2 className="section-title">A delivery leader,<br />not another AI vendor.</h2>
          <p className="builtby-body">Cre8 Your Success is led by Michael Grapentin. For over ten years he ran product and delivery inside regulated insurance and financial-services companies, de-risking go-lives, controlling vendor scope and cost, and turning messy programs into software that actually shipped. He also designs and ships production AI agents end to end. The result: automation that gets built and delivered, not a slide deck and a stalled pilot.</p>
          <div className="builtby-creds">
            {creds.map((c, i) => <span className="builtby-pill" key={i}>{c}</span>)}
          </div>
          <div className="builtby-links">
            <a href="https://www.linkedin.com/in/michael-grapentin" target="_blank" rel="noopener" className="btn-ghost">
              Michael on LinkedIn
            </a>
          </div>
        </div>
        <div className="builtby-proof">
          <div className="proof-card coming">
            <span className="proof-tag">First pilot</span>
            <p>Results from the first workflow land here soon.</p>
          </div>
          <div className="proof-card coming">
            <span className="proof-tag">Case study</span>
            <p>Named client outcome, coming soon.</p>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { LogoMark, Nav, Hero, BrandBar, HowItWorks, Features, AutomationPilot, Industries, BuiltBy, CtaBand, Footer, WorkflowDemo });