const { Button: HBtn, Icon: HIcon, Dialog: HDialog } = window.BeTechnikDesignSystem_72fdfa;

function SolutionsGrid({ items }) {
  const [open, setOpen] = React.useState(null);
  const touch = typeof matchMedia !== 'undefined' && matchMedia('(hover:none)').matches;
  return <div className="sgrid">
    {items.map((s, i) => <a key={s.slug} href={href('solutions/' + s.slug)} className={'scard reveal' + (i < 2 ? ' wide' : '') + (open === i ? ' open' : '')}
      onClick={e => { if (touch && open !== i) { e.preventDefault(); setOpen(i); } }}>
      <div className="scard-img"><img src={IMG(s.img)} alt={s.alt} loading="lazy" /></div>
      <div className="scard-body">
        <div className="scard-top"><span className="scard-idx">{String(i + 1).padStart(2, '0')}</span><span className="scard-arr"><HIcon name="arrow-up-right" size={18} /></span></div>
        <h3>{s.title}</h3>
        <div className="scard-more"><div><p>{s.hook}</p></div></div>
      </div>
    </a>)}
  </div>;
}

function SolutionsList({ items }) {
  const [on, setOn] = React.useState(0);
  const s = items[on];
  return <div className="slist">
    <div className="slist-rows reveal">
      {items.map((x, i) => <a key={x.slug} href={href('solutions/' + x.slug)} className={'srow' + (on === i ? ' on' : '')} onMouseEnter={() => setOn(i)} onFocus={() => setOn(i)}>
        <span className="srow-idx">{String(i + 1).padStart(2, '0')}</span>
        <div><h3>{x.title}</h3><div className="srow-desc"><p>{x.hook}</p></div></div>
        <span className="arr"><HIcon name="arrow-right" size={18} /></span>
      </a>)}
    </div>
    <div className="sstage" aria-hidden="true">
      <div className="media chamfer sstage-img">{items.map((x, i) => <img key={x.slug} src={IMG(x.img)} alt="" className={on === i ? 'on' : ''} loading="lazy" />)}</div>
      <div className="sstage-cap"><HIcon name={s.icon} size={24} color="var(--be-blue-500)" /><span>{s.long || s.title}</span></div>
    </div>
  </div>;
}

function ProjectDialog({ p, onClose }) {
  return <HDialog open={!!p} onClose={onClose} width={720} title={p && p.title}
    footer={<HBtn onClick={() => { onClose(); go('connect-with-us'); }} iconRight={<Arrow />}>Discuss a Similar Project</HBtn>}>
    {p && <div className="pjd">
      <div className="media" style={{ aspectRatio: '16/9', background: '#fff' }}><img src={p.img} alt={p.title + ' developed by Be Technik for ' + p.customer} style={{ objectFit: 'contain' }} /></div>
      <span className="pj-cust">Customer: {p.customer}</span>
      <dl>
        <div><dt>Challenge</dt><dd>{p.challenge}</dd></div>
        <div><dt>Solution</dt><dd>{p.solution}</dd></div>
        <div><dt>Approach</dt><dd>{p.approach}</dd></div>
      </dl>
    </div>}
  </HDialog>;
}

function Projects() {
  const [p, setP] = React.useState(null);
  return <>
    <div className="pjgrid">
      {PROJECTS.map((x, i) => <button key={x.id} className="pj reveal" onClick={() => setP(x)}>
        <div className="pj-img"><img src={x.img} alt={x.title + ' developed by Be Technik for ' + x.customer} loading="lazy" /></div>
        <div className="pj-body">
          <div className="scard-top"><span className="pj-cust">{x.customer}</span><span className="scard-idx">{String(i + 1).padStart(2, '0')}</span></div>
          <h3 className="pj-title">{x.title}</h3>
          <span className="link" style={{ justifySelf: 'start' }}>View Project <HIcon name="arrow-right" size={14} /></span>
        </div>
      </button>)}
    </div>
    <ProjectDialog p={p} onClose={() => setP(null)} />
  </>;
}

const HOW = ['Understand / Map', 'Conceptualize', 'Validate / Mockup', 'Design', 'Review / Approve', 'Build', 'Integrate / Test', 'Validate'];
const CLIENTS = [['client-bosch-brazil', 'Robert Bosch', 'Brazil'], ['client-bosch-anderson', 'Robert Bosch', 'Anderson, SC'], ['client-cummins-fletcher', 'Cummins', 'Fletcher, NC']];
const PARTNERS = [['partner-fanuc', 'FANUC (ASI)'], ['partner-harms-wende', 'Harms+Wende'], ['partner-stoeger', 'Stoeger Automation']];

function LogoTile({ id, name, sub }) {
  return <div className="logo-tile reveal">
    <div className="logo-slot"><img src={IMG(id)} alt={name + (sub ? ' — ' + sub : '')} loading="lazy" /></div>
    <div className="logo-cap"><span>{name}</span>{sub && <em>{sub}</em>}</div>
  </div>;
}

function HomePage({ variant }) {
  useReveal();
  return <>
    <section className="hero">
      <img src={IMG('robotic-assembly-line')} alt="Industrial robots working on an automated assembly line" />
      <div className="wrap hero-in">
        <div className="hero-copy">
          <Eyebrow rule="both" color="var(--be-blue-300)">Custom Machinery &amp; Automation</Eyebrow>
          <h1 className="h1 hero-h1">Engineering solutions tailored to your factory.</h1>
          <p className="hero-lead">Custom machinery, automation and robotics, designed and built according to your process.</p>
          <div className="row" style={{ marginTop: 12 }}><HBtn size="lg" iconRight={<Arrow />} onClick={() => go('connect-with-us')}>Discuss Your Project</HBtn><HBtn size="lg" variant="secondary" onClick={() => go('solutions')}>Explore Our Solutions</HBtn></div>
        </div>
        <div className="hero-foot"><span>Deerfield Beach, Florida — USA</span><span className="hero-rule" /><span>Engineering · Machinery · Automation · Robotics</span></div>
      </div>
    </section>

    <section className="sec light theme-light">
      <div className="wrap intro">
        <div className="stack reveal" style={{ gap: 28 }}>
          <Eyebrow n="01">Your Production. Our Challenge.</Eyebrow>
          <h2 className="display">We transform production challenges into <em>efficient, results-driven solutions.</em></h2>
        </div>
        <div className="intro-side reveal">
          <p className="lead">Bottlenecks, downtime, manual operations, obsolete equipment. Solving these problems often requires more than just a machine. It requires reverse engineering.</p>
          <More to="about-us">How We Think</More>
        </div>
      </div>
    </section>

    <section className="sec dark" id="solutions">
      <div className="wrap">
        <SecHead n="02" label="Solutions" title="From production challenges to engineered solutions.">
          <More to="solutions">All Solutions</More>
        </SecHead>
        {variant === 'list' ? <SolutionsList items={SOLUTIONS} /> : <SolutionsGrid items={SOLUTIONS} />}
      </div>
    </section>

    <section className="sec light theme-light alt">
      <div className="wrap">
        <SecHead n="03" label="Our Approach" title="Engineering starts with understanding.">
          <p className="lead">We understand the process before we define the solution.</p>
          <More to="solutions">Our Delivery Model</More>
        </SecHead>
        <div className="ticks eight">{HOW.map((t, i) => <div className="tick" key={t}><b>{String(i + 1).padStart(2, '0')}</b><span>{t}</span></div>)}</div>
      </div>
    </section>

    <section className="sec sunk brand">
      <div className="wrap brand-in">
        <div className="brand-logo reveal"><img src={LOGO.color} alt="Be Technik — Custom Machinery & Automation" /></div>
        <div className="stack reveal" style={{ gap: 28 }}>
          <Eyebrow n="04">Why Be Technik</Eyebrow>
          <h2 className="display" style={{ fontSize: 'clamp(30px,3.4vw,48px)' }}>Strategic engineering before proposing the solution.</h2>
          <p className="lead">More than two decades of industrial engineering leadership, applied to your production.</p>
          <More to="about-us">About Be Technik</More>
        </div>
      </div>
    </section>

    <section className="sec light theme-light" id="projects">
      <div className="wrap">
        <SecHead n="05" label="Engineered Solutions in Action" title="Real manufacturing applications." />
        <Projects />
      </div>
    </section>

    <section className="sec light theme-light alt" id="clients-partners">
      <div className="wrap">
        <SecHead n="06" label="Clients & Partners" title="Trusted by manufacturers. Backed by technology partners." />
        <div className="logo-group"><span className="flabel">Clients</span><div className="logo-row">{CLIENTS.map(([id, n, s]) => <LogoTile key={id} id={id} name={n} sub={s} />)}</div></div>
        <div className="logo-group"><span className="flabel">Partners</span><div className="logo-row">{PARTNERS.map(([id, n]) => <LogoTile key={id} id={id} name={n} />)}</div></div>
      </div>
    </section>

    <CTABand />
  </>;
}

Object.assign(window, { HomePage, SolutionsGrid, SolutionsList, Projects, HOW });