/* global React */
const spWrap = { maxWidth:'var(--container-max)', margin:'0 auto' };
const spSection = { padding:'72px var(--container-pad)' };
const spKicker = { fontSize:12.5, fontWeight:700, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--brand-accent)', margin:'0 0 10px' };
const spH2 = { fontSize:'var(--fs-display-md)', fontWeight:700, letterSpacing:'.03em', textTransform:'uppercase', lineHeight:1.2, color:'var(--text-primary)', margin:'0 0 14px' };
const spBody = { color:'var(--text-secondary)', fontSize:'var(--fs-body-lg)', lineHeight:'var(--lh-normal)', margin:0 };

function StructuresShell({ Button, Icon, NavBar, t, nap, onNav, urls, activeIndex, children }) {
  return (
    <div data-brand="structures" data-page="structures" data-page-auto="1" style={{ fontFamily:'var(--font-body)', background:'#fff' }}>
      <NavBar
        logo={<span style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
          <img src="assets/logo-structures-mark.png" alt="" style={{ height:44, width:'auto', display:'block', borderRadius:8 }} />
          <span style={{ fontSize:13.5, fontWeight:800, letterSpacing:'.05em', color:'var(--brand-primary)', lineHeight:1.15, whiteSpace:'nowrap' }}>CANAAN STRUCTURES LLC</span>
        </span>}
        links={t.nav}
        hrefs={t.nav.map((l) => urls[t.navMap[l]] || '#')}
        active={t.nav[activeIndex]}
        onNavigate={(l) => onNav && onNav(t.navMap[l])}
        cta={<Button size="sm" onClick={() => onNav && onNav('contact')}>{t.quoteShort}</Button>}
        topBar={<window.StructuresTopBar Icon={Icon} nap={nap} groupLabel={t.groupLink} groupHref={urls.group} />}
      />
      {children}
      <window.StructuresFooter Icon={Icon} t={t} nap={nap} onNav={onNav} urls={urls} />
      <window.StructuresMobileBar Icon={Icon} t={t} nap={nap} />
    </div>
  );
}

function StructuresBanner({ kicker, h1, sub, img }) {
  return (
    <section style={{ position:'relative', background:'var(--gradient-hero)', backgroundImage:'var(--hatch-navy), var(--gradient-hero)', color:'#fff', overflow:'hidden', clipPath:'polygon(0 0, 100% 0, 100% 92%, 0 100%)' }}>
      <img src={img || 'assets/photo-st-banner.jpg'} alt="" aria-hidden="true" data-parallax="0.05" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', opacity:.2 }} />
      <div style={{ position:'relative', ...spWrap, padding:'72px var(--container-pad) 96px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16 }}>
          <span style={{ width:34, height:2, background:'var(--brand-accent-light)' }} />
          <span style={{ fontSize:12.5, fontWeight:700, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--brand-accent-light)' }}>{kicker}</span>
        </div>
        <h1 style={{ fontSize:'var(--fs-display-lg)', fontWeight:800, lineHeight:'var(--lh-tight)', letterSpacing:'var(--ls-tight)', margin:'0 0 16px', maxWidth:760 }}>{h1}</h1>
        <p style={{ fontSize:'var(--fs-body-lg)', color:'#fff', lineHeight:'var(--lh-normal)', maxWidth:620, margin:0 }}>{sub}</p>
      </div>
    </section>
  );
}

function StructuresServicesPage(p) {
  const s = p.t.services;
  const keepSvc = ['shop-drawings-calculos','shop-drawings-calculations','tramite-de-permisos','permit-running','legalizacion-as-built','legalization-as-built','renderings'];
  const svcItems = s.items.filter((it) => keepSvc.indexOf(it.slug) !== -1);
  return (
    <StructuresShell {...p} activeIndex={1}>
      <StructuresBanner kicker={s.kicker} h1={s.h1} sub={s.sub} img="assets/photo-st-pintos-building.jpg" />
      <section style={{ ...spSection, background:'#fff' }}>
        <div style={spWrap}>
          {svcItems.map((it, i) => {
            const flip = i % 2 === 1;
            return (
              <article key={it.slug} style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:44, alignItems:'center', padding:'32px 0', borderTop:i ? '1px solid var(--border-subtle)' : 'none' }} data-grid="2">
                <div style={{ order:flip ? 2 : 1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14 }}>
                    <span style={{ width:52, height:52, borderRadius:12, background:'var(--brand-primary)', color:'#fff', display:'grid', placeItems:'center', flexShrink:0 }}>
                      <p.Icon name={it.icon} size={26} />
                    </span>
                    <span style={{ fontSize:38, fontWeight:800, color:'transparent', WebkitTextStroke:'1.5px var(--border-default)', lineHeight:1 }}>{String(i + 1).padStart(2, '0')}</span>
                  </div>
                  <span style={{ fontSize:11.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--brand-accent)' }}>{it.kicker}</span>
                  <h2 style={{ ...spH2, fontSize:'var(--fs-display-sm)', margin:'8px 0 12px' }}>{it.title}</h2>
                  <p style={{ ...spBody, marginBottom:18, maxWidth:520 }}>{it.desc}</p>
                  <ul style={{ margin:'0 0 22px', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
                    {it.bullets.map((b, j) => (
                      <li key={j} style={{ display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, fontWeight:600, color:'var(--text-primary)' }}>
                        <span style={{ color:'var(--brand-accent)', marginTop:1, flexShrink:0 }}><p.Icon name="check" size={17} strokeWidth={2.2} /></span>{b}
                      </li>
                    ))}
                  </ul>
                  <p.Button variant="secondary" size="sm" onClick={() => p.onNav && p.onNav('contact')}>{s.ctaButton}</p.Button>
                </div>
                <div style={{ order:flip ? 1 : 2, minWidth:0 }}>
                  <img src={it.img} alt={it.title} style={{ display:'block', width:'100%', aspectRatio:'4 / 3', objectFit:it.fit === 'contain' ? 'contain' : 'cover', background:it.fit === 'contain' ? '#fff' : 'transparent', padding:it.fit === 'contain' ? 10 : 0, border:it.fit === 'contain' ? '1px solid var(--border-subtle)' : 'none', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-lg)' }} />
                </div>
              </article>
            );
          })}
        </div>
      </section>
      <window.StructuresProcess t={p.t} />
      <window.StructuresCta Button={p.Button} t={p.t} onNav={p.onNav} />
    </StructuresShell>
  );
}

function StructuresProjectsPage(p) {
  const pr = p.t.projects;
  return (
    <StructuresShell {...p} activeIndex={2}>
      <StructuresBanner kicker={pr.kicker} h1={pr.h1} sub={pr.sub} img="assets/photo-st-stair-oleander.jpg" />
      <section style={{ ...spSection, background:'#fff' }}>
        <div style={spWrap}>
          {pr.items.map((it, i) => {
            const flip = i % 2 === 1;
            return (
              <article key={i} style={{ display:'grid', gridTemplateColumns:'minmax(0,1.1fr) minmax(0,1fr)', gap:44, alignItems:'center', padding:'36px 0', borderTop:i ? '1px solid var(--border-subtle)' : 'none' }} data-grid="2">
                <div style={{ order:flip ? 2 : 1, minWidth:0 }}>
                  <img src={it.img} alt={it.title} style={{ display:'block', width:'100%', aspectRatio:'4 / 3', objectFit:'cover', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-lg)' }} />
                </div>
                <div style={{ order:flip ? 1 : 2, minWidth:0 }}>
                  <span style={{ fontSize:11.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--brand-accent)' }}>{it.place}</span>
                  <h2 style={{ ...spH2, fontSize:'var(--fs-display-sm)', margin:'8px 0 12px' }}>{it.title}</h2>
                  <p style={{ ...spBody, maxWidth:480 }}>{it.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </section>
      <window.StructuresProjectTypes t={p.t} />
      <window.StructuresGallery t={p.t} />
      <window.StructuresCta Button={p.Button} t={p.t} onNav={p.onNav} />
    </StructuresShell>
  );
}

function StructuresAboutPage(p) {
  const a = p.t.about;
  return (
    <StructuresShell {...p} activeIndex={3}>
      <StructuresBanner kicker={a.kicker} h1={a.h1} sub={a.sub} img="assets/photo-st-alum-roof.jpg" />
      <section style={{ ...spSection, background:'#fff' }}>
        <div style={{ ...spWrap, display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:48, alignItems:'center' }} data-grid="2">
          <img src="assets/photo-st-stair-oleander.jpg" alt={a.missionKicker} style={{ display:'block', width:'100%', aspectRatio:'4 / 3', objectFit:'cover', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-lg)' }} />
          <div style={{ minWidth:0 }}>
            <p style={spKicker}>{a.missionKicker}</p>
            <h2 style={{ ...spH2, fontSize:'var(--fs-display-sm)' }}>{a.mission}</h2>
            <p style={spBody}>{a.missionBody}</p>
          </div>
        </div>
      </section>
      <section style={{ ...spSection, background:'var(--surface-inverse)', color:'#fff' }}>
        <div style={{ ...spWrap, maxWidth:840, textAlign:'center' }}>
          <p style={{ ...spKicker, color:'var(--brand-accent-light)' }}>{a.visionKicker}</p>
          <p style={{ fontSize:'var(--fs-display-sm)', fontWeight:600, lineHeight:1.45, margin:0 }}>{a.vision}</p>
        </div>
      </section>
      <section style={{ ...spSection, background:'var(--surface-alt)' }}>
        <div style={{ ...spWrap, display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:48, alignItems:'center' }} data-grid="2">
          <div style={{ minWidth:0 }}>
            <p style={spKicker}>{a.valuesKicker}</p>
            <ul style={{ margin:'14px 0 0', padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14 }}>
              {a.values.map((v, i) => (
                <li key={i} style={{ display:'flex', gap:12, alignItems:'flex-start', fontSize:15.5, lineHeight:1.6, color:'var(--text-primary)', fontWeight:500 }}>
                  <span style={{ width:9, height:9, borderRadius:'50%', background:'var(--brand-accent)', marginTop:7, flexShrink:0 }} />{v}
                </li>
              ))}
            </ul>
          </div>
          <img src="assets/photo-st-wood-terrace.jpg" alt={a.valuesKicker} style={{ display:'block', width:'100%', aspectRatio:'4 / 3', objectFit:'cover', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-sm)' }} />
        </div>
      </section>
      <window.StructuresWhy Button={p.Button} Icon={p.Icon} t={p.t} onNav={p.onNav} />
      <section style={{ ...spSection, background:'#fff' }}>
        <div style={{ ...spWrap, maxWidth:760 }}>
          <h2 style={{ ...spH2, fontSize:'var(--fs-display-sm)' }}>{a.groupTitle}</h2>
          <p style={{ ...spBody, marginBottom:18 }}>{a.groupBody}</p>
          <a href={p.urls.group + 'innovations'} style={{ fontSize:14.5, fontWeight:700, color:'var(--brand-primary)', textDecoration:'none', display:'inline-flex', alignItems:'center', gap:8 }}>
            {a.groupLink}<p.Icon name="arrowRight" size={18} />
          </a>
        </div>
      </section>
      <window.StructuresCta Button={p.Button} t={p.t} onNav={p.onNav} />
    </StructuresShell>
  );
}

function StructuresQuoteForm({ Button, Input, Select, Icon, t, nap }) {
  const c = t.contact;
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', type:c.typePlaceholder, message:'' });
  const [note, setNote] = React.useState('');
  const [sending, setSending] = React.useState(false);
  const [invalid, setInvalid] = React.useState(false);
  const set = (k) => (e) => { setInvalid(false); setForm((f) => Object.assign({}, f, { [k]: e.target.value })); };
  const body = () => [
    c.fields.name + ': ' + form.name,
    c.fields.email + ': ' + form.email,
    c.fields.phone + ': ' + form.phone,
    c.fields.type + ': ' + (form.type === c.typePlaceholder ? '—' : form.type),
    '',
    form.message,
  ].join('\n');
  const ready = () => form.name.trim() && (form.email.trim() || form.phone.trim());
  const hold = (fn) => { setInvalid(false); setSending(true); setTimeout(() => { setSending(false); fn(); }, 260); };
  const sendMail = () => {
    if (!ready()) { setInvalid(true); return setNote(c.required); }
    setNote(c.sending || '');
    hold(() => {
      setNote(c.sentMail);
      window.location.href = 'mailto:' + nap.email + '?subject=' + encodeURIComponent(c.formTitle + ' — ' + (form.name || 'Canaan Structures')) + '&body=' + encodeURIComponent(body());
    });
  };
  const sendWa = () => {
    if (!ready()) { setInvalid(true); return setNote(c.required); }
    setNote(c.sending || '');
    hold(() => {
      setNote(c.sentWa);
      window.open('https://wa.me/' + nap.wa + '?text=' + encodeURIComponent(c.formTitle + '\n\n' + body()), '_blank', 'noopener');
    });
  };
  return (
    <form onSubmit={(e) => { e.preventDefault(); sendMail(); }} style={{ display:'flex', flexDirection:'column', gap:16, background:'#fff', padding:'28px 26px', borderRadius:'var(--radius-lg)', boxShadow:'var(--shadow-md)' }}>
      <h2 style={{ ...spH2, fontSize:'var(--fs-display-sm)', margin:0 }}>{c.formTitle}</h2>
      <div data-st-field={invalid && !form.name.trim() ? 'invalid' : undefined}>
        <Input label={c.fields.name} placeholder={c.placeholders.name} value={form.name} onChange={set('name')} />
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:16 }} data-grid="2" data-st-field={invalid && !form.email.trim() && !form.phone.trim() ? 'invalid' : undefined}>
        <Input label={c.fields.email} type="email" placeholder={c.placeholders.email} value={form.email} onChange={set('email')} />
        <Input label={c.fields.phone} placeholder={c.placeholders.phone} value={form.phone} onChange={set('phone')} />
      </div>
      <Select label={c.fields.type} options={[c.typePlaceholder].concat(c.typeOptions)} value={form.type} onChange={set('type')} />
      <Input label={c.fields.message} multiline placeholder={c.placeholders.message} value={form.message} onChange={set('message')} />
      <div style={{ display:'flex', gap:12, alignItems:'center', flexWrap:'wrap', filter:sending ? 'blur(2px)' : 'none', opacity:sending ? .7 : 1, transition:'filter .2s ease, opacity .2s ease' }}>
        <Button onClick={sendMail} icon={<Icon name="mail" size={17} />}>{c.sendMail}</Button>
        <span style={{ fontSize:13, color:'var(--text-muted)' }}>{c.orSplit}</span>
        <button type="button" onClick={sendWa} style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'11px 22px', borderRadius:'var(--radius-md)', border:'none', cursor:'pointer', background:'#25D366', color:'#06341c', fontFamily:'var(--font-body)', fontSize:15, fontWeight:700 }}>
          <Icon name="whatsapp" size={17} />{c.sendWa}
        </button>
      </div>
      <p aria-live="polite" style={{ margin:0, minHeight:20, fontSize:13.5, color:invalid ? '#C0342B' : 'var(--brand-accent)', fontWeight:600 }}>{note}</p>
      {c.reassure && <p style={{ margin:0, fontSize:12.5, lineHeight:1.6, color:'var(--text-muted)' }}>{c.reassure}</p>}
    </form>
  );
}

function StructuresContactPage(p) {
  const c = p.t.contact;
  const rows = [
    [c.tiles[0].label, p.nap.phone, 'whatsapp', 'https://wa.me/' + p.nap.wa],
    [c.tiles[1].label, p.nap.email, 'mail', 'mailto:' + p.nap.email],
    [c.tiles[2].label, p.nap.addressLine, 'pin', null],
  ];
  return (
    <StructuresShell {...p} activeIndex={4}>
      <StructuresBanner kicker={c.kicker} h1={c.h1} sub={c.sub} img="assets/photo-st-fence-biarritz.jpg" />
      <section style={{ ...spSection, background:'var(--surface-alt)' }}>
        <div style={{ ...spWrap, display:'grid', gridTemplateColumns:'minmax(0,1.15fr) minmax(0,.85fr)', gap:44, alignItems:'start' }} data-grid="2">
          <StructuresQuoteForm Button={p.Button} Input={p.Input} Select={p.Select} Icon={p.Icon} t={p.t} nap={p.nap} />
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            {rows.map(([label, value, icon, href], i) => (
              <div key={i} style={{ display:'flex', gap:14, alignItems:'flex-start', background:'#fff', padding:'18px 20px', borderRadius:'var(--radius-md)', boxShadow:'var(--shadow-sm)' }}>
                <span style={{ width:42, height:42, borderRadius:10, background:'var(--brand-primary)', color:'#fff', display:'grid', placeItems:'center', flexShrink:0 }}><p.Icon name={icon} size={20} /></span>
                <div style={{ minWidth:0 }}>
                  <p style={{ margin:0, fontSize:11.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--text-muted)' }}>{label}</p>
                  {href
                    ? <a href={href} target={icon === 'whatsapp' ? '_blank' : undefined} rel={icon === 'whatsapp' ? 'noopener noreferrer' : undefined} style={{ fontSize:15.5, fontWeight:600, color:'var(--brand-primary)', textDecoration:'none', overflowWrap:'anywhere' }}>{value}</a>
                    : <p style={{ margin:0, fontSize:15.5, fontWeight:600, color:'var(--text-primary)' }}>{value}</p>}
                </div>
              </div>
            ))}
            <dl style={{ margin:0, background:'#fff', padding:'20px 22px', borderRadius:'var(--radius-md)', boxShadow:'var(--shadow-sm)', display:'flex', flexDirection:'column', gap:14 }}>
              {[[c.hoursLabel, c.hours], [c.areaLabel, c.area], [c.langLabel, c.langs]].map(([k, v], i) => (
                <div key={i}>
                  <dt style={{ fontSize:11.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--text-muted)', marginBottom:4 }}>{k}</dt>
                  <dd style={{ margin:0, fontSize:14.5, lineHeight:1.6, color:'var(--text-secondary)' }}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </section>
      <window.StructuresProcess t={p.t} />
    </StructuresShell>
  );
}

Object.assign(window, { StructuresShell, StructuresBanner, StructuresServicesPage, StructuresProjectsPage, StructuresAboutPage, StructuresContactPage, StructuresQuoteForm });