// Aloha Smart System v3 — simplified home (09-30-2026)
// Built on the live v2 site: same colors (COLORS_V2), logo (LogoA), FAQ data,
// partner strip. Loads AFTER aloha-v2-landing.jsx and reuses its globals.
// Order: Hero → What we fix → Real stores → Everything we install → Free visit → FAQ → Footer

function useIsMobileV3() {
  const [m, setM] = React.useState(typeof window !== 'undefined' && window.innerWidth <= 768);
  React.useEffect(() => {
    const fn = () => setM(window.innerWidth <= 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return m;
}

const V3 = {
  wrap: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  kicker: {
    fontSize: 12, fontWeight: 600, letterSpacing: '0.16em',
    textTransform: 'uppercase', color: COLORS_V2.ink50, marginBottom: 14,
  },
  h2: {
    fontSize: 'clamp(34px, 4.4vw, 56px)', lineHeight: 1.04,
    letterSpacing: '-0.03em', fontWeight: 700, margin: 0, color: COLORS_V2.ink,
  },
};

function NavV3() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const link = { color: COLORS_V2.ink70 };
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(245,239,230,0.92)' : COLORS_V2.bg,
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? `1px solid ${COLORS_V2.ink10}` : '1px solid transparent',
      transition: 'all 200ms ease',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoA size={28} />
          <div style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: COLORS_V2.ink }}>
            Aloha Smart System
          </div>
        </a>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center', fontSize: 14 }}>
          <a href="#solutions" style={link}>What we fix</a>
          <a href="#stores" style={link}>Our stores</a>
          <a href="#products" style={link}>Products</a>
          <a href="about" style={link}>About</a>
          <a href="#contact" style={{
            background: COLORS_V2.accent, color: 'white',
            padding: '9px 18px', borderRadius: 999, fontWeight: 600,
          }}>Free store visit</a>
        </div>
      </div>
    </nav>
  );
}

const FRAME_V3 = {
  margin: 0, position: 'relative', borderRadius: 20, overflow: 'hidden',
  background: COLORS_V2.ink,
  boxShadow: '0 20px 50px rgba(14,26,36,0.14), 0 0 0 1px rgba(14,26,36,0.06)',
};

function CaptionV3({ label, sub }) {
  return (
    <figcaption style={{
      position: 'absolute', left: 14, bottom: 14, zIndex: 2,
      background: 'rgba(255,255,255,0.94)', color: COLORS_V2.ink,
      padding: '8px 14px', borderRadius: 999,
      display: 'inline-flex', flexDirection: 'column', gap: 2,
    }}>
      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em' }}>{label}</span>
      {sub && <span style={{ fontSize: 10, fontWeight: 500, letterSpacing: '0.03em', color: COLORS_V2.ink70 }}>{sub}</span>}
    </figcaption>
  );
}

function PhotoV3({ src, alt, label, sub, height, position }) {
  return (
    <figure style={{ ...FRAME_V3, height }}>
      <img className="v3-cover" src={src} alt={alt} style={{
        width: '100%', height: '100%', objectFit: 'cover',
        objectPosition: position || 'center', display: 'block',
      }} />
      {label && <CaptionV3 label={label} sub={sub} />}
    </figure>
  );
}

// First screen = concept C (10-07-2026): words left, real stores right.
// Sizes and positions live in index.html (.v3-hero-grid / .v3-art* / .v3-dev*)
// so the old phone rules in styles/aloha.css, which match inline
// "position: absolute" and "display: grid", can't move them around.
function DeviceV3({ kind, src, alt }) {
  return (
    <div className={`v3-dev v3-dev-${kind}`}>
      <img className="v3-cover" src={src} alt={alt} />
    </div>
  );
}

function HeroArtV3() {
  return (
    <div className="v3-art">
      <figure className="v3-art-photo">
        <img className="v3-cover" src="assets/photos/sura-hawaii-blue-hour.jpg"
          alt="Sura Hawaii, Korean restaurant in Honolulu" />
        <figcaption className="v3-chip v3-chip-tr">
          <b>SURA HAWAII</b><small>Table ordering</small>
        </figcaption>
      </figure>
      <figure className="v3-art-kio">
        <DeviceV3 kind="kiosk" src="assets/photos/soul-chicken-kiosk.jpg"
          alt="Self-order kiosk at Soul Chicken, Honolulu" />
        <DeviceV3 kind="tv" src="assets/photos/soul-chicken-tv-ready.jpg"
          alt="Order-ready number on the TV at Soul Chicken" />
        <figcaption className="v3-chip v3-chip-bl">
          <b>SOUL CHICKEN</b><small>Kiosk + order-ready TV</small>
        </figcaption>
      </figure>
    </div>
  );
}

function HeroV3() {
  const isMobile = useIsMobileV3();
  return (
    <section id="top" style={{ padding: isMobile ? '28px 0 48px' : '48px 0 80px' }}>
      <div style={V3.wrap}>
        <div className="v3-hero-grid">
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 14px', background: COLORS_V2.bgAlt,
              border: `1px solid ${COLORS_V2.ink10}`, borderRadius: 999,
              fontSize: 12, fontWeight: 600, color: COLORS_V2.ink70,
              letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: COLORS_V2.accent }}></span>
              Honolulu · Clover-authorized
            </div>

            <h1 style={{
              fontSize: 'clamp(42px, 5vw, 66px)', lineHeight: 0.98,
              letterSpacing: '-0.04em', fontWeight: 700,
              margin: '20px 0 22px', color: COLORS_V2.ink,
            }}>
              Less labor.<br />More orders.<br />
              <span style={{ color: COLORS_V2.ink50 }}>One local team<br />for all of it.</span>
            </h1>

            <p style={{
              fontSize: 'clamp(17px, 1.4vw, 20px)', lineHeight: 1.5,
              color: COLORS_V2.ink70, maxWidth: 480, margin: '0 0 30px',
            }}>
              Kiosks, table ordering, commission-free delivery, time clock, and card
              processing — on the register you already have.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <a href="#contact" style={{
                background: COLORS_V2.accent, color: 'white',
                padding: '16px 28px', borderRadius: 999, fontWeight: 700, fontSize: 16,
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>
                Book a free store visit <span aria-hidden="true">→</span>
              </a>
              <a href={`tel:${ALOHA_BRAND.phone.replace(/\D/g, '')}`} style={{
                border: `1.5px solid ${COLORS_V2.ink20}`, color: COLORS_V2.ink,
                padding: '14.5px 24px', borderRadius: 999, fontWeight: 600, fontSize: 16,
              }}>
                {ALOHA_BRAND.phone}
              </a>
            </div>

            <div style={{
              marginTop: 28, fontSize: 14, color: COLORS_V2.ink70,
              display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap',
            }}>
              <span style={{ fontWeight: 700, color: COLORS_V2.ink }}>Works with Clover and Square.</span>
              <span>No need to replace your register.</span>
            </div>
          </div>

          <HeroArtV3 />
        </div>
      </div>
    </section>
  );
}

const V3_FIXES = [
  {
    img: 'assets/photos/kiosk-ordering.jpg', pos: 'center 35%',
    alt: 'Guest ordering at a self-order kiosk',
    problem: 'Labor keeps going up.',
    answer: 'Guests order at a kiosk or right from the table. Your crew cooks and serves.',
    links: [
      ['Smart Kiosk', 'products/kiosk'],
      ['Table Order', 'products/table-order'],
      ['ServeBoard', 'https://serveboard.app'],
    ],
  },
  {
    img: 'assets/photos/hula-delivery-screen.jpg', pos: 'center',
    alt: 'Hula Delivery ordering screen',
    problem: 'Delivery apps take up to 30%.',
    answer: 'Your own pickup and delivery with Hula Delivery. No commission, menu prices.',
    links: [
      ['Hula Delivery', 'https://huladelivery.com'],
      ['Delivery Hub', 'products/delivery-hub'],
    ],
  },
  {
    img: 'assets/photos/clokr-clock-in.jpg', pos: 'center',
    alt: 'Clokr clock-in screen',
    problem: 'Timesheets take hours.',
    answer: 'Staff clock in with Clokr. Hours add up for payroll, overtime included.',
    links: [['Clokr', 'https://clokr.co']],
  },
  {
    img: 'assets/photos/clover-station.jpg', pos: 'center',
    alt: 'Clover Station register',
    problem: 'Card fees and a 1-800 number.',
    answer: 'Card processing with a local team you can call. Online payments with Brijee.',
    links: [
      ['Talk to us', '#contact'],
      ['Brijee', 'https://brijee.com'],
    ],
  },
];

function FixesV3() {
  const isMobile = useIsMobileV3();
  return (
    <section id="solutions" style={{ background: COLORS_V2.bgAlt, padding: isMobile ? '56px 0' : '104px 0' }}>
      <div style={V3.wrap}>
        <div style={V3.kicker}>What we fix</div>
        <h2 style={{ ...V3.h2, maxWidth: 760, marginBottom: isMobile ? 28 : 48 }}>
          The problems every owner knows.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 20 }}>
          {V3_FIXES.map(f => (
            <article key={f.problem} style={{
              background: COLORS_V2.white, borderRadius: 20, overflow: 'hidden',
              border: `1px solid ${COLORS_V2.ink10}`, display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ height: isMobile ? 200 : 260, background: COLORS_V2.bg, overflow: 'hidden' }}>
                <img className="v3-cover" src={f.img} alt={f.alt} loading="lazy" style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: f.pos, display: 'block',
                }} />
              </div>
              <div style={{ padding: isMobile ? '22px 22px 24px' : '28px 30px 30px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{ fontSize: 26, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 10px', fontWeight: 700 }}>
                  {f.problem}
                </h3>
                <p style={{ fontSize: 16, lineHeight: 1.55, color: COLORS_V2.ink70, margin: 0 }}>{f.answer}</p>
                <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', marginTop: 'auto', paddingTop: 20 }}>
                  {f.links.map(([label, href]) => {
                    const ext = href.startsWith('http');
                    return (
                      <a key={label} href={href} {...(ext ? { target: '_blank', rel: 'noopener' } : {})} style={{
                        fontSize: 14, fontWeight: 600, color: COLORS_V2.ink,
                        borderBottom: `1.5px solid ${COLORS_V2.ink20}`, paddingBottom: 2,
                      }}>
                        {label} {ext ? '↗' : '→'}
                      </a>
                    );
                  })}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Soul Chicken's calling system: the order-status TV that hangs above the
// counter (Ready / Preparing numbers) large, with the menu TV that also shows
// the ready number set beside it. Positions live in index.html (.v3-tvstage*).
function TvStageV3({ alt, height }) {
  return (
    <figure className="v3-tvstage" style={{ height }}>
      <div className="v3-tvstage-row">
        <div className="v3-dev v3-tv-upper">
          <img className="v3-cover" src="assets/photos/soul-chicken-upper-tv.jpg"
            alt="Order status TV at Soul Chicken: Ready and Preparing numbers" />
        </div>
        <div className="v3-dev v3-tv-main">
          <img className="v3-cover" src="assets/photos/soul-chicken-tv-ready.jpg" alt={alt} />
        </div>
      </div>
    </figure>
  );
}

function StoresV3() {
  const isMobile = useIsMobileV3();
  const stores = [
    {
      img: 'assets/photos/sura-hawaii-blue-hour.jpg', pos: 'center', name: 'Sura Hawaii',
      logo: 'assets/logos/sura-hawaii-logo.png', logoWide: true,
      alt: 'Sura Hawaii, Korean restaurant in Honolulu',
      line: 'Tablets at every table send orders straight to the kitchen. Servers stay on the floor.',
      tags: ['Table ordering', 'Card processing'],
    },
    {
      tv: true, name: 'Soul Chicken',
      logo: 'assets/logos/soul-chicken-logo.png',
      alt: 'Order-ready number on the TV at Soul Chicken',
      line: 'Menu on Clover, payments on Square — both feed one order screen. Online orders print in the same kitchen.',
      tags: ['Kiosk', 'TV calling', 'Hula Delivery', 'Clokr'],
    },
  ];
  return (
    <section id="stores" style={{ padding: isMobile ? '56px 0' : '104px 0' }}>
      <div style={V3.wrap}>
        <div style={V3.kicker}>Our stores</div>
        <h2 style={{ ...V3.h2, marginBottom: isMobile ? 28 : 48 }}>Running today in Honolulu.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 24 }}>
          {stores.map(s => (
            <article key={s.name}>
              {s.tv
                ? <TvStageV3 alt={s.alt} height={isMobile ? 240 : 380} />
                : <PhotoV3 src={s.img} alt={s.alt} height={isMobile ? 240 : 380} position={s.pos} />}
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '22px 0 10px' }}>
                <span style={{
                  height: 48, width: s.logoWide ? 'auto' : 48, flex: '0 0 auto',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  background: '#FFFFFF', borderRadius: 12, padding: s.logoWide ? '0 10px' : 7,
                  border: `1px solid ${COLORS_V2.ink10}`,
                }}>
                  <img className="v3-logo" src={s.logo} alt={`${s.name} logo`} />
                </span>
                <h3 style={{ fontSize: 26, letterSpacing: '-0.02em', margin: 0, fontWeight: 700 }}>{s.name}</h3>
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: COLORS_V2.ink70, margin: '0 0 14px', maxWidth: 520 }}>{s.line}</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {s.tags.map(t => (
                  <span key={t} style={{
                    fontSize: 12, fontWeight: 600, color: COLORS_V2.ink70,
                    background: COLORS_V2.bgAlt, borderRadius: 999, padding: '5px 12px',
                  }}>{t}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const V3_PRODUCTS = [
  ['Smart Kiosk', 'Self-order at the counter.', 'products/kiosk'],
  ['Table Order (Z-ORDER)', 'Order from the table. Works with Clover, Square, and Toast.', 'products/table-order'],
  ['ServeBoard', 'Your TV calls the order. Staff tap Ready on a phone.', 'https://serveboard.app'],
  ['Food Court', 'One kiosk for the whole food court.', 'products/food-court-master'],
  ['Hula Delivery', 'Your own pickup and delivery. No commission.', 'https://huladelivery.com'],
  ['Delivery Hub', 'DoorDash, Uber Eats, and Grubhub on one screen.', 'products/delivery-hub'],
  ['Clokr', 'Time clock and schedules. Hours ready for payroll.', 'https://clokr.co'],
  ['Brijee', 'Payment links, QR codes, and online checkout.', 'https://brijee.com'],
  ['Inventory Master', 'Inventory that puts expiring stock on sale.', 'products/inventory-master'],
  ['Musubi Display Network', 'Menus and promos on your TVs.', 'products/display-network'],
  ['Card processing', 'Clover terminals, installed and supported locally.', '#contact'],
];

function ProductsV3() {
  const isMobile = useIsMobileV3();
  return (
    <section id="products" style={{ background: COLORS_V2.bgAlt, padding: isMobile ? '56px 0' : '104px 0' }}>
      <div style={V3.wrap}>
        <div style={V3.kicker}>Products</div>
        <h2 style={{ ...V3.h2, marginBottom: isMobile ? 24 : 40 }}>Everything we install.</h2>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
          columnGap: 48, borderTop: `1px solid ${COLORS_V2.ink20}`,
        }}>
          {V3_PRODUCTS.map(([name, line, href]) => {
            const ext = href.startsWith('http');
            return (
              <a key={name} href={href} {...(ext ? { target: '_blank', rel: 'noopener' } : {})} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16,
                padding: '20px 0', borderBottom: `1px solid ${COLORS_V2.ink20}`,
              }}>
                <span>
                  <span style={{ display: 'block', fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: COLORS_V2.ink }}>{name}</span>
                  <span style={{ display: 'block', fontSize: 15, color: COLORS_V2.ink70, marginTop: 4 }}>{line}</span>
                </span>
                <span aria-hidden="true" style={{ color: COLORS_V2.accent, fontWeight: 700 }}>{ext ? '↗' : '→'}</span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function VisitV3() {
  const isMobile = useIsMobileV3();
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');
    setErrorMsg('');
    const formData = new FormData(e.currentTarget);
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST', headers: { Accept: 'application/json' }, body: formData,
      });
      const data = await res.json();
      if (data.success) { setStatus('success'); e.target.reset(); }
      else { setStatus('error'); setErrorMsg(data.message || 'Something went wrong.'); }
    } catch (err) {
      setStatus('error'); setErrorMsg('Network error.');
    }
  }

  const input = {
    width: '100%', background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.18)', borderRadius: 10,
    padding: '14px 16px', fontSize: 15, color: 'white', fontFamily: 'inherit', outline: 'none',
  };
  const label = {
    display: 'block', fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
    textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 8,
  };

  return (
    <section id="contact" style={{ background: COLORS_V2.ink, color: 'white', padding: isMobile ? '64px 0' : '112px 0' }}>
      <div style={{ ...V3.wrap, display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'start' }}>
        <div>
          <div style={{ ...V3.kicker, color: 'rgba(255,255,255,0.55)' }}>Free store visit</div>
          <h2 style={{ ...V3.h2, color: 'white', marginBottom: 22 }}>
            We&rsquo;ll come see your store.<br />
            <span style={{ color: 'rgba(255,255,255,0.5)' }}>And show you where the hours go.</span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', maxWidth: 480, margin: '0 0 12px' }}>
            The first visit is free. No obligation.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', maxWidth: 480, margin: '0 0 32px' }}>
            Growing, or running more than one location? We&rsquo;ll plan the whole setup with you.
          </p>
          <div style={{ display: 'grid', gap: 16, marginBottom: 24 }}>
            <a href={`tel:${ALOHA_BRAND.phone.replace(/\D/g, '')}`} style={{
              fontSize: 22, fontWeight: 700, color: 'white', alignSelf: 'flex-start',
              borderBottom: '1px solid rgba(255,255,255,0.3)', paddingBottom: 6,
            }}>{ALOHA_BRAND.phone}</a>
            <a href={`mailto:${ALOHA_BRAND.email}`} style={{
              fontSize: 18, fontWeight: 600, color: 'white', alignSelf: 'flex-start',
              borderBottom: '1px solid rgba(255,255,255,0.3)', paddingBottom: 6,
            }}>{ALOHA_BRAND.email}</a>
          </div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6 }}>
            On-site across O&lsquo;ahu. Remote support for the neighbor islands.
          </div>
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 20, padding: isMobile ? 24 : 36,
        }}>
          {status === 'success' ? (
            <div style={{ minHeight: 320, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: COLORS_V2.accent, display: 'grid', placeItems: 'center', fontSize: 30, fontWeight: 700, marginBottom: 20 }}>✓</div>
              <div style={{ fontSize: 24, fontWeight: 700, marginBottom: 10 }}>Mahalo — we got it.</div>
              <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', margin: 0 }}>We&rsquo;ll call you to set a time.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <input type="hidden" name="access_key" value="adeb6c3b-2bf5-4dad-a49a-59875cbaf20d" />
              <input type="hidden" name="subject" value="Aloha Smart System — Free store visit request" />
              <input type="hidden" name="from_name" value="Aloha Smart System Website" />
              <input type="checkbox" name="botcheck" style={{ display: 'none' }} tabIndex="-1" autoComplete="off" />
              <div style={{ display: 'grid', gap: 16 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label htmlFor="v3-name" style={label}>Name *</label>
                    <input id="v3-name" name="name" required style={input} />
                  </div>
                  <div>
                    <label htmlFor="v3-business" style={label}>Business</label>
                    <input id="v3-business" name="business" style={input} />
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label htmlFor="v3-phone" style={label}>Phone *</label>
                    <input id="v3-phone" type="tel" name="phone" required style={input} />
                  </div>
                  <div>
                    <label htmlFor="v3-email" style={label}>Email *</label>
                    <input id="v3-email" type="email" name="email" required style={input} />
                  </div>
                </div>
                <div>
                  <label htmlFor="v3-message" style={label}>What would you like to fix?</label>
                  <textarea id="v3-message" name="message" rows="4" style={{ ...input, resize: 'vertical', minHeight: 110 }} />
                </div>
                {status === 'error' && (
                  <div style={{
                    background: 'rgba(217,79,47,0.15)', border: '1px solid rgba(217,79,47,0.4)',
                    borderRadius: 10, padding: '12px 16px', fontSize: 14, color: '#FFD7CC', lineHeight: 1.5,
                  }}>
                    {errorMsg} Please call {ALOHA_BRAND.phone} or email {ALOHA_BRAND.email}.
                  </div>
                )}
                <button type="submit" disabled={status === 'submitting'} style={{
                  background: COLORS_V2.accent, color: 'white', border: 'none',
                  padding: '16px 28px', borderRadius: 999, fontSize: 16, fontWeight: 700,
                  opacity: status === 'submitting' ? 0.6 : 1,
                }}>
                  {status === 'submitting' ? 'Sending…' : 'Book my free visit →'}
                </button>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', lineHeight: 1.5 }}>
                  By submitting, you&rsquo;re sharing your contact info with Aloha Smart System (Oahu Merchant Service LLC). We don&rsquo;t share it with anyone else.
                </div>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function FAQV3() {
  const [open, setOpen] = React.useState(-1);
  const isMobile = useIsMobileV3();
  return (
    <section id="faq" style={{ padding: isMobile ? '56px 0' : '96px 0' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', padding: '0 32px' }}>
        <div style={V3.kicker}>Questions</div>
        <div style={{ borderTop: `1px solid ${COLORS_V2.ink20}` }}>
          {ALOHA_FAQ.map((item, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${COLORS_V2.ink20}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i} style={{
                width: '100%', padding: '22px 0', background: 'transparent', border: 'none', textAlign: 'left',
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24,
                fontSize: 18, fontWeight: 600, color: COLORS_V2.ink, lineHeight: 1.4,
              }}>
                <span>{item.q}</span>
                <span style={{ fontSize: 22, color: COLORS_V2.ink50, transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 200ms' }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 22, fontSize: 16, lineHeight: 1.6, color: COLORS_V2.ink70, maxWidth: 720 }}>{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterV3() {
  const head = { fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: COLORS_V2.ink50, marginBottom: 14 };
  const li = { fontSize: 14, color: COLORS_V2.ink70 };
  const list = { listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 };
  return (
    <footer style={{ padding: '56px 0 40px', borderTop: `1px solid ${COLORS_V2.ink10}` }}>
      <div style={V3.wrap}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <LogoA size={26} />
              <div style={{ fontWeight: 700, fontSize: 15 }}>Aloha Smart System</div>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: COLORS_V2.ink70, margin: '0 0 16px', maxWidth: 320 }}>
              One local team for kiosks, table ordering, delivery, time clock, and card processing.
            </p>
            <div style={{ fontSize: 13, color: COLORS_V2.ink50, lineHeight: 1.6 }}>
              Operated by Oahu Merchant Service LLC<br />Honolulu, Hawaii<br />
              <a href="https://musubimedia.net" style={{ color: COLORS_V2.accent, fontWeight: 500 }}>Sister company: Musubi Media →</a>
            </div>
          </div>
          <div>
            <div style={head}>In your store</div>
            <ul style={list}>
              <li><a href="products/kiosk" style={li}>Smart Kiosk</a></li>
              <li><a href="products/table-order" style={li}>Table Order</a></li>
              <li><a href="products/food-court-master" style={li}>Food Court</a></li>
              <li><a href="products/delivery-hub" style={li}>Delivery Hub</a></li>
              <li><a href="products/inventory-master" style={li}>Inventory Master</a></li>
              <li><a href="products/display-network" style={li}>Display Network</a></li>
            </ul>
          </div>
          <div>
            <div style={head}>Our apps</div>
            <ul style={list}>
              <li><a href="https://serveboard.app" target="_blank" rel="noopener" style={li}>ServeBoard</a></li>
              <li><a href="https://serveboard.app/foodcourt" target="_blank" rel="noopener" style={li}>ServeBoard for Food Courts</a></li>
              <li><a href="https://huladelivery.com" target="_blank" rel="noopener" style={li}>Hula Delivery</a></li>
              <li><a href="https://clokr.co" target="_blank" rel="noopener" style={li}>Clokr</a></li>
              <li><a href="https://brijee.com" target="_blank" rel="noopener" style={li}>Brijee</a></li>
            </ul>
          </div>
          <div>
            <div style={head}>Contact</div>
            <ul style={list}>
              <li><a href={`tel:${ALOHA_BRAND.phone.replace(/\D/g, '')}`} style={li}>{ALOHA_BRAND.phone}</a></li>
              <li><a href={`mailto:${ALOHA_BRAND.email}`} style={li}>{ALOHA_BRAND.email}</a></li>
              <li><a href="about" style={li}>About</a></li>
            </ul>
          </div>
        </div>
        <div style={{
          paddingTop: 24, borderTop: `1px solid ${COLORS_V2.ink10}`,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          fontSize: 12, color: COLORS_V2.ink50, alignItems: 'flex-start',
        }}>
          <div>© {new Date().getFullYear()} Oahu Merchant Service LLC. All rights reserved.</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <span>Authorized partner of</span>
            <CardConnectMark scale={0.6} />
            <span>· Clover-authorized</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function AlohaHomeV3() {
  return (
    <div style={{ background: COLORS_V2.bg, color: COLORS_V2.ink, minHeight: '100vh', fontFamily: '"Inter Tight", system-ui, sans-serif' }}>
      <NavV3 />
      <HeroV3 />
      <FixesV3 />
      <StoresV3 />
      <ProductsV3 />
      <VisitV3 />
      <FAQV3 />
      <FooterV3 />
    </div>
  );
}

window.AlohaHomeV3 = AlohaHomeV3;