/* eslint-disable */
// Home page

function HomeScreen({ go, t }) {
  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero dot-grid">
        <div className="container hero-grid">
          <div>
            <Eyebrow>AI adoption &amp; engineering experts</Eyebrow>
            <h1 className="h-display">
              Your AI journey,<br />
              <em>simplified</em> &amp; supported.
            </h1>
            <p className="lede">Unlock the right AI Solutions for your business.



            </p>
            <div className="cta-row">
              <Button variant="primary" size="lg" onClick={() => go("blueprint")}>
                Start with an AI Blueprint <Icon name="arrow-right" size={16} className="arrow" />
              </Button>
              <Button variant="secondary" size="lg" onClick={() => go("services")}>
                Explore services
              </Button>
            </div>
            <div className="proof">
              <span><strong>35+ yrs</strong> combined AI &amp; strategy experience</span>
              <span style={{ width: 1, height: 14, background: "var(--hairline)" }} />
              <span><strong>30% faster</strong> outcomes vs going alone</span>
              <span style={{ width: 1, height: 14, background: "var(--hairline)" }} />
              <span><strong>100%</strong> Australian-built</span>
            </div>
          </div>

          <div className="hero-visual">
            <HeroBoard />
          </div>
        </div>
      </section>

      {/* LOGO STRIP, trust signal directly under hero */}
      <section className="section" style={{ background: "#fff", paddingTop: 28, paddingBottom: 32 }}>
        <div className="container">
          <div className="logo-strip-label-row">
            <span className="logo-strip-label">Trusted by Australian SMBs across</span>
          </div>
        </div>
        <div className="logo-marquee" aria-label="Client logos">
          <div className="logo-marquee-track">
            {/* Track is rendered twice so the keyframe animation can wrap seamlessly */}
            {[0, 1].map((copy) =>
            Array.from({ length: 12 }).map((_, i) => {
              const slotId = `client-logo-${i + 1}`;
              const handleClick = (e) => {
                // Reach into the image-slot's open shadow root and trigger its
                // hidden file input. Works whether the slot is empty OR filled
                // (image-slot's own click handler only fires on the .empty div).
                const root = e.currentTarget.querySelector("image-slot");
                const input = root && root.shadowRoot && root.shadowRoot.querySelector('input[type="file"]');
                if (input) input.click();
              };
              return (
                <button
                  key={`${copy}-${i}`}
                  type="button"
                  className="logo-marquee-item"
                  aria-label={copy === 0 ? `Replace logo ${i + 1}` : undefined}
                  aria-hidden={copy === 1 ? "true" : undefined}
                  tabIndex={copy === 1 ? -1 : 0}
                  onClick={handleClick}>
                  
                    <image-slot
                    id={slotId}
                    placeholder={`Logo ${i + 1}`}
                    shape="rect"
                    fit="contain" />
                  
                  </button>);

            })
            )}
          </div>
        </div>
      </section>

      {/* THREE PILLARS */}
      <section className="section section--paper" style={{ paddingTop: 56 }}>
        <div className="container">
          <div className="section-head section-head--row">
            <div className="head-left">
              <Eyebrow>Where to start</Eyebrow>
              <h2 className="h-section">Three pillars. Pick where you are.</h2>
            </div>
            <LinkOut onClick={() => go("services")}>See full service menu</LinkOut>
          </div>

          <div className="grid grid--3">
            <PillarCard
              tone="strategy"
              tag="Strategy"
              title="Know where to start"
              body="Map your operations, score your readiness, and walk away with six prioritised opportunities, in one engagement."
              meta={["AI Blueprint", "Best first step for most SMBs"]}
              onClick={() => go("blueprint")}
              ctaLabel="See AI Blueprint" />
            
            <PillarCard
              tone="enable"
              tag="Foundations"
              title="Build your team's confidence"
              body="Workshops and governance frameworks that turn AI from a buzzword into something your team actually uses well."
              meta={["AI Setup", "AI Governance", "AI Literacy"]}
              onClick={() => go("services")}
              ctaLabel="See foundations" />
            
            <PillarCard
              tone="build"
              tag="Build"
              title="Ship working systems"
              body="From Fixed-Scope Builds to custom-made Custom Builds, five capabilities mapped to two engagement shapes."
              meta={["Fixed-Scope Builds", "Custom Builds"]}
              onClick={() => go("build")}
              ctaLabel="Explore Build" />
            
          </div>
        </div>
      </section>

      {/* 5-ACCELERATOR STRIP */}
      <section className="section section--white" style={{ paddingTop: 56, paddingBottom: 96 }}>
        <div className="container">
          <div className="section-head">
            <Eyebrow>How we talk about capability</Eyebrow>
            <h2 className="h-section">Five accelerators, one shared vocabulary.</h2>
            <p className="lede">
              Every Build engagement, every tool in our Toolbox, every case study is tagged
              by one of these five. So you always know what kind of work you're looking at.
            </p>
          </div>
          <AcceleratorStrip
            title="The five accelerators" />
          
        </div>
      </section>

      {/* LOGO STRIP, moved to top of page */}
      {/* RECENT WORK */}
      <section className="section section--paper">
        <div className="container">
          <div className="section-head section-head--row">
            <div className="head-left">
              <Eyebrow>Recent work</Eyebrow>
              <h2 className="h-section">Working systems, shipped to Australian SMBs.</h2>
            </div>
            <LinkOut onClick={() => go("work")}>See all case studies</LinkOut>
          </div>

          <div className="grid grid--3">
            <CaseCard
              slotId="case-1"
              tone="agents"
              tag="Agentic AI"
              headline="From 4-hour proposal drafts to 12 minutes."
              client="National building services firm · 60 staff" />
            
            <CaseCard
              slotId="case-2"
              tone="knowledge"
              tag="Knowledge AI"
              headline="One search bar across 7 years of project files."
              client="Regional architecture practice · 22 staff" />
            
            <CaseCard
              slotId="case-3"
              tone="decision"
              tag="Data AI"
              headline="Weekly demand forecasts the ops team actually use."
              client="DTC pet-food brand · 14 staff" />
            
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section section--white" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div className="section-head section-head--row" style={{ marginBottom: 32 }}>
            <div className="head-left">
              <Eyebrow>In their words</Eyebrow>
              <h2 className="h-section">What clients say after working with us.</h2>
            </div>
            <LinkOut onClick={() => go("work")}>Read full case studies</LinkOut>
          </div>

          <div className="testimonial-grid">
            {/* Featured (real), Strategy / Digital Goliath */}
            <figure className="testimonial testimonial--feature">
              <Icon name="quote" size={28} color="var(--ia-blue)" className="testimonial-mark" />
              <blockquote>
                <p>
                  “As the owner of a digital advertising agency managing $300K per month in ad spend
                  with a team of eight, I recently completed a preliminary assessment and consultancy
                  session with Janey. The session highlighted several AI tools already available that
                  can help us <em>double our capacity</em>.
                </p>
                <p>
                  This guidance saved me approximately 20 hours of trial and error and identified
                  tools that will save hundreds of hours in 2025.”
                </p>
              </blockquote>
              <figcaption>
                <div className="testimonial-avatar">
                  <image-slot id="testimonial-goliath" placeholder="Jeremy's headshot" shape="circle" />
                </div>
                <div className="testimonial-attr">
                  <strong>Jeremy Yang</strong>
                  <span>Principal &amp; Account Manager, Digital Goliath Marketing</span>
                </div>
                <div className="testimonial-logo">
                  <image-slot id="testimonial-goliath-logo" placeholder="Digital Goliath logo" shape="rect" fit="contain" />
                </div>
              </figcaption>
            </figure>

            {/* Supporting, Foundations / Making Waves Foundation */}
            <figure className="testimonial">
              <Icon name="quote" size={22} color="#C7CCD8" className="testimonial-mark" />
              <blockquote>
                <p>“Janey has truly transformed our approach to grant writing and fundraising. Her training sessions were engaging, methodical and easy to understand, we now have a comprehensive strategy leveraging AI to enhance our efforts.”</p>
              </blockquote>
              <figcaption>
                <div className="testimonial-avatar testimonial-avatar--sm">
                  <image-slot id="testimonial-making-waves" placeholder="Gareth's headshot" shape="circle" />
                </div>
                <div className="testimonial-attr">
                  <strong>Gareth Hogan</strong>
                  <span>General Manager, Making Waves Foundation</span>
                </div>
                <div className="testimonial-logo">
                  <image-slot id="testimonial-making-waves-logo" placeholder="Making Waves logo" shape="rect" fit="contain" />
                </div>
              </figcaption>
            </figure>

            {/* Supporting, Build / Chromatix */}
            <figure className="testimonial">
              <Icon name="quote" size={22} color="#C7CCD8" className="testimonial-mark" />
              <blockquote>
                <p>“IA opened our eyes to digital opportunities we never knew could save us money. Janey walked us through every step, and the one-pager made everything clear. Just from the AI Launch package, she has saved us over $5k within the month.”</p>
              </blockquote>
              <figcaption>
                <div className="testimonial-avatar testimonial-avatar--sm">
                  <image-slot id="testimonial-chromatix" placeholder="Irwin's headshot" shape="circle" />
                </div>
                <div className="testimonial-attr">
                  <strong>Irwin Hau</strong>
                  <span>Director, Chromatix Web Design</span>
                </div>
                <div className="testimonial-logo">
                  <image-slot id="testimonial-chromatix-logo" placeholder="Chromatix logo" shape="rect" fit="contain" />
                </div>
              </figcaption>
            </figure>
          </div>

        </div>
      </section>

      {/* BOTTOM SOFT-CTA */}
      <section className="section section--paper" style={{ paddingTop: 56, paddingBottom: 64 }}>
        <div className="container">
          <OffRamp
            label="Not sure where to start?"
            title={<span>Most clients begin with an <strong>AI Blueprint</strong>, a structured way to figure out what's worth doing first.</span>}
            cta="Book a Blueprint"
            onCta={() => go("blueprint")}
            variant="primary" />
          
        </div>
      </section>
    </div>);

}

// ---------- Hero board ----------
// A composed "sticker board" that hints at the product surface
// without being an actual product screen.
function HeroBoard() {
  return (
    <div className="hero-board">
      {/* Cropped base graphic peek, top-right */}
      <div style={{
        position: "absolute", top: -30, right: -40, width: 320, height: 320,
        background: "url(assets/graphics/ia-base-graphic-web.png) center/cover no-repeat",
        opacity: .9,
        maskImage: "radial-gradient(ellipse at center, black 40%, transparent 70%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 40%, transparent 70%)"
      }} />

      {/* Floating accelerator chips */}
      <div className="hero-chip" style={{ top: 36, left: 36 }}>
        <div className="chip-meta">Strategy</div>
        <div className="chip-row">
          <span className="acc-dot acc-dot--decision" />
          <strong>AI Blueprint</strong>
        </div>
        <div style={{ fontSize: 12, color: "#5C6172" }}>5 phases · scoped to you</div>
      </div>

      <div className="hero-chip" style={{ top: 150, right: 36 }}>
        <div className="chip-meta">Build · Fixed-Scope Builds</div>
        <div className="chip-row">
          <span className="acc-dot acc-dot--knowledge" />
          <strong>Smart Search</strong>
        </div>
        <div style={{ fontSize: 12, color: "#5C6172" }}>Internal info, instantly findable</div>
      </div>

      <div className="hero-chip" style={{ bottom: 180, left: 60 }}>
        <div className="chip-meta">Build · Custom</div>
        <div className="chip-row">
          <span className="acc-dot acc-dot--agents" />
          <strong>Agentic AI</strong>
        </div>
        <div style={{ fontSize: 12, color: "#5C6172" }}>Proposal generation, end-to-end</div>
      </div>

      <div className="hero-chip" style={{ bottom: 60, right: 50 }}>
        <div className="chip-meta">Foundations</div>
        <div className="chip-row">
          <span className="acc-dot acc-dot--tool" />
          <strong>AI Literacy</strong>
        </div>
        <div style={{ fontSize: 12, color: "#5C6172" }}>8 workshops · org-wide</div>
      </div>

      <div className="hero-chip" style={{ bottom: 36, left: 36, minWidth: 0 }}>
        <div className="chip-meta">Output</div>
        <div className="chip-row">
          <strong style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>Working systems</strong>
        </div>
        <div style={{ fontSize: 12, color: "#5C6172" }}>Not slide-deck strategy.</div>
      </div>
    </div>);

}

// ---------- Pillar card ----------
function PillarCard({ tone, tag, title, body, meta, onClick, ctaLabel }) {
  return (
    <div className="pillar-card" onClick={onClick}>
      <div className={`pillar-glyph pillar-glyph--${tone}`} />
      <Tag tone={tone}>{tag}</Tag>
      <h3 className="h-card" style={{ fontSize: 24, fontWeight: 600, letterSpacing: "-0.015em", maxWidth: "16ch" }}>
        {title}
      </h3>
      <p style={{ margin: 0, color: "#4A4F60", fontSize: 15, lineHeight: 1.55 }}>{body}</p>
      <ul className="pillar-meta">
        {meta.map((m, i) => <li key={i}>{m}</li>)}
      </ul>
      <div className="pillar-cta">
        {ctaLabel}
        <Icon name="arrow-right" size={14} className="arrow" />
      </div>
    </div>);

}

// ---------- Case card ----------
function CaseCard({ slotId, tone, tag, headline, client }) {
  return (
    <div className="case-card">
      <div className="case-img">
        <image-slot
          id={`hero-${slotId}`}
          placeholder={`Drop a hero image for "${headline}"`}
          shape="rect"
          style={{ height: "100%", width: "100%" }} />
        
      </div>
      <div className="case-body">
        <Tag tone={tone} dot>{tag}</Tag>
        <div className="case-headline">{headline}</div>
        <div className="case-client">{client}</div>
      </div>
    </div>);

}

Object.assign(window, { HomeScreen, HeroBoard, PillarCard, CaseCard });