/* Pages: Home, Tribe, Jane, Managed, Consulting */
(function(){

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

function ArrowRight({size=14}) {
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
}

/* === HOME === */
function HomePage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="hero container">
        <div className="hero-eyebrow eyebrow reveal in"><span className="status-dot" aria-hidden="true"></span>Orlando, FL · Operating since 2014</div>
        <h1 className="hero-title reveal in">
          There is a <span className="serif accent">better way</span><br/>
          to build <button className="it-portal" onClick={()=>window.dispatchEvent(new CustomEvent('portalActivate'))} onMouseEnter={()=>window.dispatchEvent(new CustomEvent('portalPeek',{detail:true}))} onMouseLeave={()=>window.dispatchEvent(new CustomEvent('portalPeek',{detail:false}))} aria-label="Switch to classic site"><img src="public/iternative-logo.png" alt="ITernative" /><span className="it-portal-glow" aria-hidden="true"></span><span className="it-portal-ring" aria-hidden="true"></span></button>
        </h1>
        <p className="reveal in" style={{maxWidth: 520, marginTop: 28, fontSize: 17, color:'var(--fg-soft)'}}>
          We operate as your fractional IT department — one team, multiple businesses, zero wasted overhead. Eleven years before the term caught on.
        </p>
        <div className="hero-cta reveal in">
          <button className="btn btn-primary" onClick={()=>document.getElementById('services').scrollIntoView({behavior:'smooth'})}>
            See the paths <span className="arrow"><ArrowRight/></span>
          </button>
          <button className="btn btn-ghost" onClick={()=>onNavigate('contact')}>
            Talk to us
          </button>
        </div>

        <div className="hero-meta reveal">
          <div className="hero-meta-item"><div className="k">Model</div><div className="v">Shared-capacity. Fractional.</div></div>
          <div className="hero-meta-item"><div className="k">Stack</div><div className="v">People · Tools · AI</div></div>
          <div className="hero-meta-item"><div className="k">Fit</div><div className="v">Trades · Field Services · Mid-market</div></div>
        </div>
      </section>

      <section className="section" id="services">
        <div className="container">
          <div className="section-mark reveal">
            <span className="num">§ 01</span><span className="rule"></span>
            <span className="label">Services</span>
          </div>
          <div className="service-index-head reveal">
            <h2>Many roads. <span className="h-display fog">One destination.</span></h2>
            <p className="service-index-lede">Pick the engagement that fits today. Move between them as you grow.</p>
          </div>

          <ul className="service-index reveal">
            <ServiceRow num="01" id="tribe"      name="Tribe"      kicker="Fractional IT Department"    line="One monthly budget. People, tools, and AI compute — pooled and shared." onNavigate={onNavigate} />
            <ServiceRow num="02" id="jane"       name="Jane"       kicker="AI Employee"                 line="Always-on digital teammate that knows every process and recalls in milliseconds." onNavigate={onNavigate} />
            <ServiceRow num="03" id="managed"    name="Managed"    kicker="IT Services"                 line="Proactive operations from hire to offboard. Helpdesk, security, patching — handled." onNavigate={onNavigate} />
            <ServiceRow num="04" id="consulting" name="Consulting" kicker="Project & Advisory Work"      line="One-time projects, audits, or advisory engagements — let us know how we can help." onNavigate={onNavigate} />
            <ServiceRow num="05" name="ITplanB"  kicker="IT Rescue & Recovery"        line="When IT goes wrong — rogue admin, lost access, blind spots — we step in and rebuild." external="https://itplanb.com" />
          </ul>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal">
            <span className="num">§ 02</span><span className="rule"></span>
            <span className="label">By the numbers</span>
          </div>
          <div className="stats reveal">
            <div className="stat"><div className="num">11</div><div className="lbl">Years operating</div></div>
            <div className="stat"><div className="num">8+</div><div className="lbl">Active client orgs</div></div>
            <div className="stat"><div className="num">1</div><div className="lbl">Predictable budget</div></div>
            <div className="stat"><div className="num">0</div><div className="lbl">Outside investors</div></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal">
            <span className="num">§ 03</span><span className="rule"></span>
            <span className="label">About</span>
          </div>
          <div className="two-col reveal">
            <div>
              <p className="eyebrow" style={{marginBottom:18}}>Origin</p>
              <p className="pull">Your IT department. Without building one.</p>
            </div>
            <div>
              <p style={{fontSize:17, marginBottom: 24}}>
                We've operated as a shared-capacity IT department since 2014 — the same model now called "fractional." One team rotates across multiple businesses, so every client gets higher-caliber talent and platforms without the full-time price tag.
              </p>
              <p style={{fontSize:17, color:'var(--fg-fog)'}}>
                In 2024 we went deep on AI: voice agents, workflow automation, lead intelligence, AI-generated content. Not a side experiment — a core part of what we deliver.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal">
            <span className="num">§ 04</span><span className="rule"></span>
            <span className="label">Trusted by</span>
          </div>
          <div className="logos reveal">
            {ABOUT_CLIENTS.map(c => (
              <a
                key={c.name}
                className={`logo-cell logo-cell-${c.mode || 'dark'}`}
                href={c.url}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={c.name}
              >
                <img src={c.logo} alt={c.name} />
                <span className="logo-cell-name mono">{c.name}</span>
              </a>
            ))}
          </div>
          <div style={{marginTop: 32, display:'flex', gap: 8, flexWrap:'wrap'}} className="chips reveal">
            <span className="chip">Construction</span>
            <span className="chip">Manufacturing</span>
            <span className="chip">Plumbing</span>
            <span className="chip">Roofing</span>
            <span className="chip">Field Services</span>
          </div>
        </div>
      </section>

      <ContactSection onNavigate={onNavigate} />
    </div>
  );
}

/* === Minimal service row used on the Home directory === */
function ServiceRow({ num, id, name, kicker, line, external, onNavigate }) {
  const isExternal = !!external;
  const Tag = isExternal ? 'a' : 'button';
  const props = isExternal
    ? { href: external, target: '_blank', rel: 'noopener noreferrer' }
    : { type: 'button', onClick: () => onNavigate(id) };
  return (
    <li className="service-row-item">
      <Tag className={`service-row ${isExternal ? 'is-external' : ''}`} {...props}>
        <span className="service-row-num mono">{num}</span>
        <span className="service-row-name">{name}</span>
        <span className="service-row-kicker mono">{kicker}</span>
        <span className="service-row-line">{line}</span>
        <span className="service-row-arrow" aria-hidden="true">
          {isExternal ? '↗' : '→'}
        </span>
      </Tag>
    </li>
  );
}

function ServiceCard({ num, title, subtitle, desc, onClick, total='05', external=false }) {
  const Tag = external ? 'a' : 'div';
  const props = external
    ? { href: onClick, target: '_blank', rel: 'noopener noreferrer' }
    : { onClick };
  return (
    <Tag className={`service-card ${external ? 'service-card-external' : ''}`} {...props} style={{cursor:'pointer', textDecoration:'none', color:'inherit'}}>
      <div className="num">{num} / {total}</div>
      <h3 style={{marginTop: 18}}>{title}</h3>
      <div className="mono" style={{fontSize:12, color:'var(--fg-fog)', marginTop:6, textTransform:'uppercase', letterSpacing:'0.1em'}}>{subtitle}</div>
      <div className="desc">{desc}</div>
      <div className="arrow-link">{external ? <>Visit site <span aria-hidden="true">↗</span></> : <>Learn more <ArrowRight/></>}</div>
    </Tag>
  );
}

/* === TRIBE === */
function TribePage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="subhero container">
        <p className="eyebrow reveal in">§ Tribe — Fractional Co-Op IT Department</p>
        <h1 className="reveal in">A <span className="h-display accent">co-op</span> for IT.<br/>One budget. All-inclusive.<br/>People, Tools, AI.</h1>
        <p className="lead reveal in">A fractional, cooperative IT department — the people, the platform, and the AI compute are pooled across member companies. More powerful than an MSP. Less expensive than hiring. Faster than building.</p>
        <div className="hero-cta reveal in">
          <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Start your Tribe <span className="arrow"><ArrowRight/></span></button>
          <button className="btn btn-ghost" onClick={()=>document.getElementById('tribe-pillars').scrollIntoView({behavior:'smooth'})}>See the model</button>
        </div>
      </section>

      <section className="section" id="tribe-pillars">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 01</span><span className="rule"></span><span className="label">Three pillars, one orbit</span></div>
          <div className="two-col reveal" style={{marginBottom: 56}}>
            <h2>Your <span className="h-display accent">priorities</span> sit at the center.<br/>Everything else orbits around them.</h2>
            <p style={{fontSize:17}}>Modern IT requires a toolbox, a team, and access to AI compute. Buying all three alone is wasteful. Sharing them — pooled across clients — gives every member higher-tier capability at a fraction of the cost.</p>
          </div>
          <div className="pillars reveal">
            <Pillar title="Team" subtitle="People who learn your business" items={['Helpdesk & engineers','vCIO planning','Project management','Onboarding & offboarding','Vendor coordination']} />
            <Pillar title="Tools" subtitle="The platform, ready on day one" items={['Datacenter resources','MSP tooling included','Cloud & network management','Monitoring & alerting','Backups & recovery']} />
            <Pillar title="AI" subtitle="Compute and intelligence, pooled" items={['Token pools across models','Workflow automation','AI integration & deployment','Voice agents','Continuous improvement']} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 02</span><span className="rule"></span><span className="label">The math</span></div>
          <div className="compare reveal">
            <div className="compare-side">
              <h4>Instead of</h4>
              <ul>
                <li><span className="mark">×</span>Buying every tool yourself</li>
                <li><span className="mark">×</span>Hiring full-time staff for skills used 10% of the time</li>
                <li><span className="mark">×</span>Building infrastructure from scratch</li>
                <li><span className="mark">×</span>Learning AI implementation alone</li>
              </ul>
            </div>
            <div className="compare-side good">
              <h4>You share</h4>
              <ul>
                <li><span className="mark">●</span>Expertise across multiple disciplines</li>
                <li><span className="mark">●</span>Infrastructure & tooling costs</li>
                <li><span className="mark">●</span>Automation frameworks</li>
                <li><span className="mark">●</span>AI capabilities & compute</li>
              </ul>
            </div>
          </div>
          <div style={{marginTop: 32, textAlign:'center'}} className="reveal">
            <p className="mono fog" style={{fontSize: 12, letterSpacing:'0.1em', textTransform:'uppercase', marginBottom: 12}}>Most clients start at</p>
            <p className="h-display" style={{fontSize: 'clamp(56px, 8vw, 96px)', color:'var(--accent)'}}>$6,000<span style={{fontFamily:'var(--font-mono)', fontSize:18, color:'var(--fg-fog)', letterSpacing:'0.05em', fontStyle:'normal', verticalAlign:'super'}}>/mo</span></p>
            <p className="fog mono" style={{fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', marginTop:8}}>One pool · No nickel-and-diming</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 03</span><span className="rule"></span><span className="label">How it's delivered</span></div>
          <ol className="steps reveal">
            <li><span className="step-title">Set priorities</span><span className="step-desc">Define what matters most this month — security, growth, automation.</span></li>
            <li><span className="step-title">Plan the sprint</span><span className="step-desc">Work organized into a clear monthly cadence with visible progress.</span></li>
            <li><span className="step-title">Execute & track</span><span className="step-desc">Deliver with full visibility. You see where the hours go.</span></li>
            <li><span className="step-title">Review & improve</span><span className="step-desc">What worked, what didn't, what's next. Continuous loop.</span></li>
          </ol>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-box reveal">
            <h2 style={{fontSize: 'clamp(32px, 4.5vw, 48px)'}}>Pick a starting share. Onboard in one session. Start delivering immediately.</h2>
            <p className="lead">Built to plug in alongside existing IT — or replace the missing department entirely.</p>
            <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Start your Tribe <span className="arrow"><ArrowRight/></span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

function Pillar({ title, subtitle, items }) {
  return (
    <div className="pillar">
      <div className="icon"><span className="mono" style={{fontSize:13}}>●</span></div>
      <h4>{title}</h4>
      <p className="mono fog" style={{fontSize:11, textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:18, marginTop:6}}>{subtitle}</p>
      <ul>{items.map((it, i)=>(<li key={i}>{it}</li>))}</ul>
    </div>
  );
}

/* === JANE === */
function JanePage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="subhero container">
        <p className="eyebrow reveal in">§ Jane — Your AI Employee</p>
        <h1 className="reveal in">Always on.<br/>Always knows.<br/><span className="h-display accent">Never forgets.</span></h1>
        <p className="lead reveal in">Jane is your digital teammate. She knows your entire company history, understands every process, speaks every language, recalls anything in milliseconds — and learns from every interaction.</p>
        <div className="hero-cta reveal in">
          <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Meet Jane <span className="arrow"><ArrowRight/></span></button>
          <button className="btn btn-ghost" onClick={()=>document.getElementById('jane-cap').scrollIntoView({behavior:'smooth'})}>See capabilities</button>
        </div>
      </section>

      <section className="section" id="jane-cap">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 01</span><span className="rule"></span><span className="label">What Jane does</span></div>
          <div className="services reveal">
            <ServiceCard num="01" total="04" title="Total recall" subtitle="Your operational memory" desc="Every email, ticket, document, decision — indexed and instantly searchable. The institutional memory you wish you had."/>
            <ServiceCard num="02" total="04" title="Every language" subtitle="Speaks your customers'" desc="Customer service across 60+ languages without losing context, tone, or accuracy. Live, written, voice."/>
            <ServiceCard num="03" total="04" title="Process literate" subtitle="Trained on your SOPs" desc="Knows how your company actually runs — the documented version and the way it really happens."/>
            <ServiceCard num="04" total="04" title="Compounding" subtitle="Learns every shift" desc="Improves with each interaction. The Jane your team works with at year three is sharper than the one at month one."/>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col reveal">
            <div>
              <p className="eyebrow" style={{marginBottom:18}}>Why now</p>
              <p className="pull">A teammate who never sleeps, never forgets, and stays consistent across every shift.</p>
            </div>
            <div>
              <p style={{fontSize:17, marginBottom:24}}>Jane sits inside your existing tools — Slack, Teams, your CRM, your phone system, your email. She doesn't replace your team. She extends them, picking up the predictable work and freeing humans for what humans do best.</p>
              <ol className="steps">
                <li><span className="step-title">Discovery</span><span className="step-desc">We map your processes, knowledge sources, and integration surface area.</span></li>
                <li><span className="step-title">Training</span><span className="step-desc">Jane ingests your data and is shaped by your team's feedback in week one.</span></li>
                <li><span className="step-title">Deployment</span><span className="step-desc">She goes live in one channel, then expands as confidence grows.</span></li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-box reveal">
            <h2 style={{fontSize:'clamp(32px, 4.5vw, 48px)'}}>Hire your first AI teammate.</h2>
            <p className="lead">No pilot fees. We deploy Jane on a Tribe share and prove the value first.</p>
            <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Start the discovery <span className="arrow"><ArrowRight/></span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* === MANAGED === */
function ManagedPage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="subhero container">
        <p className="eyebrow reveal in">§ Managed IT — Proactive Operations</p>
        <h1 className="reveal in">User-centric IT.<br/><span className="h-display accent">Quiet.</span> By design.</h1>
        <p className="lead reveal in">Patching, security, helpdesk, hire-to-offboard. The work that keeps your business running — handled with a proactive attitude, not a ticket queue.</p>
        <div className="hero-cta reveal in">
          <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Get coverage <span className="arrow"><ArrowRight/></span></button>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 01</span><span className="rule"></span><span className="label">What we run for you</span></div>
          <div className="services reveal">
            <ServiceCard num="01" title="Endpoints" subtitle="Workstations · Mobile · BYOD" desc="Provisioning, patching, encryption, lifecycle. The full runway from day-one setup to the day a laptop comes back."/>
            <ServiceCard num="02" title="Identity & access" subtitle="365 · Workspace · SSO" desc="Mailboxes, groups, MFA, conditional access, offboarding in minutes. The pieces that get missed when IT is part-time."/>
            <ServiceCard num="03" title="Network & cloud" subtitle="On-prem · Hybrid · Cloud" desc="Firewalls, switches, wifi, VPN, cloud workloads. Monitored, alerted, and tuned proactively."/>
            <ServiceCard num="04" title="Backups & security" subtitle="Posture & compliance" desc="3-2-1 backups, EDR, vulnerability scans, awareness training. The boring work that prevents the loud days."/>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 02</span><span className="rule"></span><span className="label">The difference</span></div>
          <div className="compare reveal">
            <div className="compare-side">
              <h4>Typical MSP</h4>
              <ul>
                <li><span className="mark">×</span>Reactive ticket queue</li>
                <li><span className="mark">×</span>Rotating helpdesk faces</li>
                <li><span className="mark">×</span>Surprise project quotes</li>
                <li><span className="mark">×</span>Generic playbooks</li>
              </ul>
            </div>
            <div className="compare-side good">
              <h4>ITernative Managed</h4>
              <ul>
                <li><span className="mark">●</span>Proactive — we see it before you do</li>
                <li><span className="mark">●</span>Same engineers. Year over year.</li>
                <li><span className="mark">●</span>Predictable monthly budget</li>
                <li><span className="mark">●</span>Built for trades & field services</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-box reveal">
            <h2 style={{fontSize:'clamp(32px, 4.5vw, 48px)'}}>Give your team an IT department that just works.</h2>
            <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Get a quote <span className="arrow"><ArrowRight/></span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* === CONSULTING === */
function ConsultingPage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="subhero container">
        <p className="eyebrow reveal in">§ Consulting — Project & Advisory Work</p>
        <h1 className="reveal in">Tell us what you <span className="h-display accent">need</span>.<br/>We'll bring the rest.</h1>
        <p className="lead reveal in">No retainer required. No "package" to fit your problem into. Bring us a one-time project, an audit, a second opinion, or a tricky integration — we plug our team, tools, and AI capacity into your operation for as long as it takes to get it done.</p>
        <div className="hero-cta reveal in">
          <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Tell us about your project <span className="arrow"><ArrowRight/></span></button>
          <button className="btn btn-ghost" onClick={()=>document.getElementById('consulting-shape').scrollIntoView({behavior:'smooth'})}>Examples ↓</button>
        </div>
      </section>

      <section className="section section-tight" id="consulting-shape">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 01</span><span className="rule"></span><span className="label">How it works</span></div>
          <div className="two-col reveal" style={{marginBottom: 40}}>
            <h2>Freeform by design.<br/><span className="h-display fog">Engineered to your scope.</span></h2>
            <p style={{fontSize:17}}>Most engagements run anywhere from a few days to a few months. Fixed scope and price where we can — time-and-materials when discovery comes first. Either way, you get the same engineers, the same platform, and the same AI tooling that powers our Tribe members.</p>
          </div>
          <div className="consulting-shape reveal">
            <div className="consulting-shape-row">
              <div className="consulting-shape-key mono">Scope</div>
              <div className="consulting-shape-val">As small as a one-day audit. As large as a multi-month migration. We don't gate-keep by size.</div>
            </div>
            <div className="consulting-shape-row">
              <div className="consulting-shape-key mono">Pricing</div>
              <div className="consulting-shape-val">Fixed-scope projects when the work is well-defined. Hourly or weekly when discovery comes first. Quoted in writing before anything starts.</div>
            </div>
            <div className="consulting-shape-row">
              <div className="consulting-shape-key mono">Team</div>
              <div className="consulting-shape-val">A senior engineer leads. Specialists pull in as needed — networking, security, AI, cloud, identity. You don't have to map who does what.</div>
            </div>
            <div className="consulting-shape-row">
              <div className="consulting-shape-key mono">Handoff</div>
              <div className="consulting-shape-val">Documentation, runbooks, and a real walk-through. Or fold the work into a Tribe share if you want us to keep operating it.</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 02</span><span className="rule"></span><span className="label">Things people bring us</span></div>
          <div className="two-col reveal" style={{marginBottom: 40}}>
            <h2>A short, honest list.</h2>
            <p style={{fontSize:17}}>Not exhaustive — just the asks we hear most often. If your problem isn't here, send it anyway. The answer is usually "yes, and here's how we'd scope it."</p>
          </div>
          <div className="consulting-asks reveal">
            <ConsultingAsk num="01" title="One-time projects" line="Office moves, server migrations, M365 / Google Workspace cutovers, identity rollouts, SaaS consolidations." />
            <ConsultingAsk num="02" title="Audits & assessments" line="Security posture, license waste, vendor contracts, network health, AI readiness, compliance gap analysis." />
            <ConsultingAsk num="03" title="AI build-outs" line="Voice agents, workflow automation, lead-intelligence pipelines, internal copilots, content generation systems." />
            <ConsultingAsk num="04" title="Advisory" line="Fractional CTO conversations, vendor selection, M&A IT integration, second opinions on a quote you just got." />
            <ConsultingAsk num="05" title="Rescue work" line="Stuck migrations, half-finished builds, broken integrations, projects another vendor walked away from." />
            <ConsultingAsk num="06" title="Something else" line="If it's not on this list, that's not a no. Tell us the goal — we'll tell you whether we're the right team." />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 03</span><span className="rule"></span><span className="label">How an engagement runs</span></div>
          <ol className="steps reveal">
            <li><span className="step-title">Conversation</span><span className="step-desc">A 30-minute call. You describe the goal. We ask the questions that surface the real scope.</span></li>
            <li><span className="step-title">Proposal</span><span className="step-desc">Written scope, timeline, and price within 48 hours. No surprises later.</span></li>
            <li><span className="step-title">Execution</span><span className="step-desc">A senior engineer on point. Specialists pulled in as needed. Weekly check-ins, daily Slack / Teams.</span></li>
            <li><span className="step-title">Handoff</span><span className="step-desc">Documentation, training, and a clean exit — or roll into a Tribe share for ongoing operation.</span></li>
          </ol>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-box reveal">
            <h2 style={{fontSize:'clamp(32px, 4.5vw, 48px)'}}>Got a project in mind?</h2>
            <p style={{fontSize:17, color:'var(--fg-soft)', maxWidth: 560, margin: '0 auto 28px'}}>Tell us what you're trying to accomplish. If we can help, we'll send back a scope and price within 48 hours. If we can't, we'll tell you who can.</p>
            <button className="btn btn-primary" onClick={()=>onNavigate('contact')}>Start the conversation <span className="arrow"><ArrowRight/></span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

function ConsultingAsk({ num, title, line }) {
  return (
    <div className="consulting-ask">
      <div className="consulting-ask-num mono">{num}</div>
      <div className="consulting-ask-title">{title}</div>
      <div className="consulting-ask-line">{line}</div>
    </div>
  );
}

/* === CONTACT === */
function ContactSection({ onNavigate }) {
  const [form, setForm] = React.useState({ name:'', email:'', company:'', message:'' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    try {
      // Don't actually post in the prototype — but mirror the real endpoint shape
      await new Promise(r => setTimeout(r, 800));
      setStatus('sent');
      setForm({ name:'', email:'', company:'', message:'' });
    } catch { setStatus('error'); }
  };
  return (
    <section className="section contact-section" id="contact">
      <div className="contact-bg" aria-hidden="true">
        <div className="contact-bg-grid"></div>
        <div className="contact-bg-glow"></div>
      </div>
      <div className="container">
        <div className="section-mark reveal">
          <span className="num">§ Contact</span>
          <span className="rule"></span>
          <span className="label">A 30-min call with a real engineer</span>
        </div>
        <div className="contact-head reveal">
          <h2>Let's <span className="h-display accent">talk.</span></h2>
          <div className="contact-presence">
            <span className="status-dot" aria-hidden="true"></span>
            <div>
              <div className="contact-presence-t">Currently online</div>
              <div className="contact-presence-s mono">Orlando, FL · ET · Mon–Fri 8a–6p</div>
            </div>
          </div>
        </div>

        <div className="contact-layout reveal">
          {/* LEFT: channel stack */}
          <div className="contact-channels">
            <a className="contact-row" href="tel:407-731-9944">
              <span className="contact-row-num mono">01</span>
              <div className="contact-row-body">
                <div className="contact-row-eyebrow mono">Call us</div>
                <div className="contact-row-val">(407) 731-9944</div>
                <div className="contact-row-sub">Pick up the phone. We answer.</div>
              </div>
              <span className="contact-row-arrow"><ArrowRight/></span>
            </a>

            <button className="contact-row" type="button" onClick={()=>window.dispatchEvent(new CustomEvent('openChat'))}>
              <span className="contact-row-num mono">02</span>
              <div className="contact-row-body">
                <div className="contact-row-eyebrow mono">Chat with Jane</div>
                <div className="contact-row-val">Start a conversation</div>
                <div className="contact-row-sub">Our AI knows the company. She'll route you fast.</div>
              </div>
              <span className="contact-row-arrow"><ArrowRight/></span>
            </button>

            <a className="contact-row" href="https://outlook.office.com/book/ScheduleaCall@iternative.com/?ismsaljsauthenabled" target="_blank" rel="noopener noreferrer">
              <span className="contact-row-num mono">03</span>
              <div className="contact-row-body">
                <div className="contact-row-eyebrow mono">Schedule a meeting</div>
                <div className="contact-row-val">Book a Teams call</div>
                <div className="contact-row-sub">30 minutes. No pitch deck. A real engineer.</div>
              </div>
              <span className="contact-row-arrow"><ArrowRight/></span>
            </a>

            <div className="contact-coord mono">
              <span>28.5384° N</span>
              <span className="contact-coord-rule"></span>
              <span>81.3789° W</span>
            </div>
          </div>

          {/* RIGHT: form */}
          <form className="contact-form" onSubmit={submit}>
            <div className="contact-form-head">
              <span className="mono fog" style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase'}}>Or send a brief</span>
              <h3 style={{margin:'8px 0 0', fontSize:24, fontFamily:'var(--font-display)', fontWeight:400}}>Tell us where IT is breaking.</h3>
            </div>

            <div className="contact-form-row">
              <FloatField label="Name" required value={form.name} onChange={v=>setForm({...form, name:v})} />
              <FloatField label="Email" type="email" required value={form.email} onChange={v=>setForm({...form, email:v})} />
            </div>
            <FloatField label="Company" value={form.company} onChange={v=>setForm({...form, company:v})} />
            <FloatField label="What's the situation?" textarea rows={5} required value={form.message} onChange={v=>setForm({...form, message:v})} />

            <div className="contact-form-foot">
              <span className={`form-status mono ${status === 'sent' ? 'ok' : status === 'error' ? 'err' : ''}`}>
                {status === 'sent' ? '✓ Message received — we\'ll reply within 1 business day.' :
                 status === 'error' ? '× Could not send. Try a different channel above.' :
                 '↳ We read every message. No autoresponders.'}
              </span>
              <button type="submit" className="btn btn-primary contact-submit" disabled={status === 'sending'}>
                <span className="contact-submit-label">
                  {status === 'sending' ? 'Sending…' : status === 'sent' ? 'Sent' : 'Send message'}
                </span>
                <span className="arrow"><ArrowRight/></span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

/* Floating-label field used in contact form */
function FloatField({ label, value, onChange, required, type='text', textarea, rows=4 }) {
  const [focused, setFocused] = React.useState(false);
  const has = value && value.length > 0;
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label className={`float-field ${focused ? 'focus' : ''} ${has ? 'has' : ''} ${textarea ? 'is-textarea' : ''}`}>
      <Tag
        type={textarea ? undefined : type}
        rows={textarea ? rows : undefined}
        required={required}
        value={value}
        onChange={e=>onChange(e.target.value)}
        onFocus={()=>setFocused(true)}
        onBlur={()=>setFocused(false)}
      />
      <span className="float-label">{label}{required && <span className="float-req">*</span>}</span>
      <span className="float-rule" aria-hidden="true"></span>
    </label>
  );
}

/* === ABOUT === */
const ABOUT_SERVICE_GROUPS = [
  {
    pillar: 'Run',
    title: 'Operations',
    desc: 'The day-to-day backbone — patched, secured, watched.',
    icon: 'ops',
    items: [
      { t: 'Infrastructure', s: 'Servers, networks, workstations', icon: 'server' },
      { t: 'IT Management', s: 'Patching, monitoring, planning', icon: 'monitor' },
      { t: 'Security', s: 'Proactive posture, compliance', icon: 'shield' },
    ],
  },
  {
    pillar: 'Connect',
    title: 'Cloud & People',
    desc: 'The systems your team logs into every morning.',
    icon: 'cloud',
    items: [
      { t: 'Cloud & Email', s: 'Microsoft 365, Google Workspace', icon: 'cloud' },
      { t: 'People Ops', s: 'New-hire setup, separation, access', icon: 'users' },
    ],
  },
  {
    pillar: 'Build',
    title: 'Strategy & AI',
    desc: 'Where you\u2019re going next \u2014 and how to get there.',
    icon: 'spark',
    items: [
      { t: 'AI Adoption', s: 'Planning and building automation', icon: 'spark' },
      { t: 'Strategy', s: 'Fractional CTO advisory', icon: 'compass' },
    ],
  },
];

function ServiceIcon({ name }) {
  const props = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'server':  return <svg {...props}><rect x="3" y="4"  width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><circle cx="7" cy="7.5" r="0.6" fill="currentColor" stroke="none"/><circle cx="7" cy="16.5" r="0.6" fill="currentColor" stroke="none"/></svg>;
    case 'monitor':return <svg {...props}><path d="M3 12h4l2-5 4 10 2-5h6"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'cloud':  return <svg {...props}><path d="M7 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11.7-1A4 4 0 0 0 7 18z"/></svg>;
    case 'users':  return <svg {...props}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="7" r="2.5"/><path d="M21 18c0-2.5-1.8-4.5-4-4.5"/></svg>;
    case 'spark':  return <svg {...props}><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="M5.5 5.5l2.8 2.8"/><path d="M15.7 15.7l2.8 2.8"/><path d="M5.5 18.5l2.8-2.8"/><path d="M15.7 8.3l2.8-2.8"/><circle cx="12" cy="12" r="2.5"/></svg>;
    case 'compass':return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5.5-5.5 2 2-5.5 5.5-2z"/></svg>;
    case 'ops':    return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.32.74.97 1.27 1.74 1.39H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
    default: return null;
  }
}
const ABOUT_WHY = [
  { t: 'No outside investors', d: 'Decisions are made for clients, not shareholders. Fully bootstrapped since day one.' },
  { t: 'Transparent operational model', d: 'You see where your money goes. Shared capacity means higher-caliber talent and platforms without the full-time price tag.' },
  { t: 'A team that knows your business', d: 'Not a rotating helpdesk. The same people, learning your environment over years — not tickets.' },
  { t: 'Proven + evolving', d: '11 years of operational history. Every client benefits from tooling, processes, and lessons built across the portfolio.' },
];
// mode: 'light' = light logo on dark tile, 'dark' = dark logo on light tile, 'fill' = stretch to fill
const ABOUT_CLIENTS = [
  { name:'Aldora Glass',        logo:'public/logos/Aldora_Glass.png',        url:'https://aldoraglass.com/',           mode:'dark' },
  { name:'AllPro Plumbing',     logo:'public/logos/AllPro_Plumbing.png',     url:'https://allproplumbing.org/',        mode:'dark' },
  { name:'Dave Jones Services', logo:'public/logos/Dave_Jones_Services.png', url:'https://www.davejonesservices.com/', mode:'fill' },
  { name:'Development of CFL',  logo:'public/logos/Development_of_CFL.png',  url:'https://www.developmentcfl.org/',    mode:'dark' },
  { name:'Douglas Partners',    logo:'public/logos/Douglas_Partners.png',    url:'https://www.douglaspartnersllc.com/',mode:'dark' },
  { name:'Insurance Claim HQ',  logo:'public/logos/Insurance_Claim_HQ.png',  url:'https://insuranceclaimhq.com/',      mode:'light' },
  { name:'HTH / CarSigns',      logo:'public/logos/HTH_CarSigns.png',        url:'https://www.carsigns.com/',          mode:'light' },
  { name:'Lo-Temp Engineering', logo:'public/logos/Lo-Temp_Engineering.png', url:'https://www.lo-tempengineering.com/',mode:'fill' },
];
function AboutPage({ onNavigate }) {
  useReveal();
  return (
    <div className="page">
      <section className="subhero container">
        <p className="eyebrow reveal in"><span className="status-dot" aria-hidden="true"></span>About ITernative — Orlando, FL · Operating since 2014</p>
        <h1 className="reveal in">Your IT department.<br/><span className="h-display accent">Without building one.</span></h1>
        <p className="lead reveal in">We operate as your company's IT department on a shared-capacity model — the same concept now called "fractional." We've been doing it since before the term caught on. One team, multiple businesses, zero wasted overhead.</p>
      </section>

      <section className="section section-tight">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 01</span><span className="rule"></span><span className="label">Leadership</span></div>
          <div className="two-col reveal" style={{marginBottom:48}}>
            <h2>Leadership.<br/><span className="h-display accent">Two operators, no politics.</span></h2>
            <p style={{fontSize:17, justifySelf:'end', maxWidth:480}}>The same people you'll talk to on day one are the same people running your IT in year five.</p>
          </div>
          <div className="leaders-block reveal">
            <div className="leaders-pair">
              <a className="leader-card" href="https://www.linkedin.com/in/pavel-vakh-1a027317/" target="_blank" rel="noopener noreferrer">
                <span className="leader-portrait">
                  <span className="leader-portrait-ring" aria-hidden="true"></span>
                  <img src="public/team/Pavel_Vakh.png" alt="Pavel Vakh" />
                </span>
                <span className="leader-meta">
                  <span className="leader-card-name">Pavel Vakh</span>
                  <span className="leader-card-link mono">LinkedIn ↗</span>
                </span>
              </a>
              <span className="leader-divider" aria-hidden="true"></span>
              <a className="leader-card" href="https://www.linkedin.com/in/andreas-limones-911770b5/" target="_blank" rel="noopener noreferrer">
                <span className="leader-portrait">
                  <span className="leader-portrait-ring" aria-hidden="true"></span>
                  <img src="public/team/Andreas_Limones.png" alt="Andreas Limones" />
                </span>
                <span className="leader-meta">
                  <span className="leader-card-name">Andreas Limones</span>
                  <span className="leader-card-link mono">LinkedIn ↗</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 02</span><span className="rule"></span><span className="label">What we run for you</span></div>
          <div className="two-col reveal" style={{marginBottom:48}}>
            <h2>Three pillars.<br/><span className="h-display accent">One operating model.</span></h2>
            <p style={{fontSize:17, justifySelf:'end', maxWidth:480}}>Every engagement combines from the same toolbox — we just dial each pillar to your situation.</p>
          </div>
          <div className="svc-pillars reveal">
            {ABOUT_SERVICE_GROUPS.map((g, i) => (
              <div key={g.title} className="svc-pillar">
                <div className="svc-pillar-head">
                  <span className="svc-pillar-num mono">0{i+1}</span>
                  <span className="svc-pillar-eyebrow mono">— {g.pillar}</span>
                </div>
                <h3 className="svc-pillar-title">{g.title}</h3>
                <p className="svc-pillar-desc">{g.desc}</p>
                <ul className="svc-list">
                  {g.items.map(it => (
                    <li key={it.t} className="svc-item">
                      <span className="svc-item-icon"><ServiceIcon name={it.icon}/></span>
                      <span className="svc-item-body">
                        <span className="svc-item-t">{it.t}</span>
                        <span className="svc-item-s">{it.s}</span>
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 03</span><span className="rule"></span><span className="label">Companies that rely on us</span></div>
          <div className="two-col reveal" style={{marginBottom: 40}}>
            <h2>Trusted across <span className="h-display accent">trades & teams.</span></h2>
            <div style={{justifySelf:'end', maxWidth:480}}>
              <p style={{fontSize:17, marginBottom:12}}>Full outsource — or alongside their in-house team.</p>
              <p className="mono fog" style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase'}}>{ABOUT_CLIENTS.length} active members · 11 years operating</p>
            </div>
          </div>
        </div>
        <div className="client-marquee reveal" aria-label="Client logos">
          <div className="client-marquee-row" data-dir="left">
            <div className="client-marquee-track">
              {[...ABOUT_CLIENTS, ...ABOUT_CLIENTS].map((c, i) => (
                <a key={`a-${i}`} className={`client-tile client-tile-${c.mode||'dark'}`} href={c.url} target="_blank" rel="noopener noreferrer" aria-label={c.name}>
                  <img src={c.logo} alt={c.name} />
                  <span className="client-tile-name mono">{c.name}</span>
                </a>
              ))}
            </div>
          </div>
          <div className="client-marquee-row" data-dir="right">
            <div className="client-marquee-track">
              {[...ABOUT_CLIENTS.slice().reverse(), ...ABOUT_CLIENTS.slice().reverse()].map((c, i) => (
                <a key={`b-${i}`} className={`client-tile client-tile-${c.mode||'dark'}`} href={c.url} target="_blank" rel="noopener noreferrer" aria-label={c.name}>
                  <img src={c.logo} alt={c.name} />
                  <span className="client-tile-name mono">{c.name}</span>
                </a>
              ))}
            </div>
          </div>
          <div className="client-marquee-edge client-marquee-edge-l" aria-hidden="true"></div>
          <div className="client-marquee-edge client-marquee-edge-r" aria-hidden="true"></div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 04</span><span className="rule"></span><span className="label">2024 →</span></div>
          <div className="two-col reveal">
            <h2>Then we went <span className="h-display accent">deep on AI.</span></h2>
            <p style={{fontSize:17}}>Voice agents, workflow automation, lead intelligence pipelines, AI-generated content — we build and deploy it for our clients. Not as a side experiment. As a core part of what we deliver.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 05</span><span className="rule"></span><span className="label">Why this model works</span></div>
          <ol className="steps reveal">
            {ABOUT_WHY.map(w => (
              <li key={w.t}><span className="step-title">{w.t}</span><span className="step-desc">{w.d}</span></li>
            ))}
          </ol>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-mark reveal"><span className="num">§ 06</span><span className="rule"></span><span className="label">Currently growing in</span></div>
          <div className="two-col reveal">
            <h2>Trades & <span className="h-display accent">field services.</span></h2>
            <div>
              <p style={{fontSize:17, marginBottom: 24}}>Construction, manufacturing, plumbing, roofing — industries where IT is often an afterthought until it becomes a crisis. We bring the same co-op model that's worked for a decade to companies that build things.</p>
              <div className="chips">
                {['Construction','Manufacturing','Plumbing','Roofing','Field Services'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="reveal" style={{textAlign:'center', maxWidth: 620, margin:'0 auto', paddingTop: 32, borderTop:'1px solid var(--border)'}}>
            <p className="pull" style={{margin:'0 auto', fontStyle:'italic'}}>"We chose this model because it works better — and after 11 years, we still love showing up every day to prove it."</p>
          </div>
        </div>
      </section>

      <ContactSection onNavigate={onNavigate} />
    </div>
  );
}

window.Pages = { HomePage, TribePage, JanePage, ManagedPage, ConsultingPage, AboutPage, ContactSection };
})();