// Shared section pieces used across pages

// ---- FAQ Accordion ----
function FAQItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const ref = React.useRef(null);
  return (
    <div className={`faq-item ${open ? 'is-open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        <span>{q}</span>
        <span className="chev"><Icon name="plus" size={18} /></span>
      </button>
      <div className="faq-a" style={{maxHeight: open ? (ref.current?.scrollHeight + 'px') : 0}}>
        <div ref={ref} className="faq-a-inner">{a}</div>
      </div>
    </div>
  );
}
window.FAQItem = FAQItem;

function FAQ({ items }) {
  return (
    <div>
      {items.map((it, i) => <FAQItem key={i} q={it.q} a={it.a} defaultOpen={i === 0 && it.defaultOpen !== false} />)}
    </div>
  );
}
window.FAQ = FAQ;

// ---- CTA Band ----
function CTABand({ eyebrow = 'Get in touch', title, body, primary = 'Schedule a Free Consultation', onPrimary, secondary, onSecondary }) {
  return (
    <section className="section">
      <div className="container">
        <div className="cta-band">
          <div className="cols-2" style={{'--cols':'1.4fr 1fr', '--col-gap':'48px', alignItems:'center'}}>
            <div>
              <div className="eyebrow">{eyebrow}</div>
              <h2 className="h1" style={{margin:'18px 0 16px', maxWidth:'14ch'}}>{title}</h2>
              {body && <p className="lede" style={{margin:0}}>{body}</p>}
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12, alignItems:'flex-start', minWidth:0}}>
              <button className="btn btn--primary btn--lg" onClick={onPrimary} style={{maxWidth:'100%', whiteSpace:'normal'}}>
                {primary} <Icon name="arrow-up-right" size={16} />
              </button>
              {secondary && (
                <button className="btn btn--secondary btn--lg" onClick={onSecondary} style={{maxWidth:'100%'}}>
                  {secondary}
                </button>
              )}
              <div className="mono dim" style={{marginTop:4, wordBreak:'break-word', maxWidth:'100%'}}>(919) 210-1601 · nick@auroranetworksolutions.com</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.CTABand = CTABand;

// ---- Service card grid ----
function ServiceCard({ to, number, icon, title, body, tags, accent }) {
  return (
    <Link to={to} className="service-card" style={{'--accent': accent}}>
      <div className="number">{number}</div>
      <div className="icon-tile icon-tile--lg">
        <Icon name={icon} size={28} />
      </div>
      <h3 className="h3">{title}</h3>
      <p className="body">{body}</p>
      <div className="tags">
        {tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>
      <div className="footer-row mt-2">
        <span className="quote-link">
          Explore <Icon name="arrow-up-right" />
        </span>
      </div>
    </Link>
  );
}
window.ServiceCard = ServiceCard;

// ---- Process step grid ----
function ProcessGrid({ steps }) {
  return (
    <div className="process-grid">
      {steps.map((s, i) => (
        <div className="process-step" key={i}>
          <div className="step-num">0{i+1}</div>
          <div className="step-title">{s.title}</div>
          <div className="step-body">{s.body}</div>
        </div>
      ))}
    </div>
  );
}
window.ProcessGrid = ProcessGrid;

// ---- Bullet list ----
function BulletList({ items }) {
  return (
    <ul className="bullet-list">
      {items.map((b, i) => (
        <li key={i}><span className="check"><Icon name="check" size={12} /></span><span>{b}</span></li>
      ))}
    </ul>
  );
}
window.BulletList = BulletList;

// ---- Section header ----
function SectionHeader({ eyebrow, title, body, align = 'left' }) {
  return (
    <div style={{textAlign: align, maxWidth: align === 'center' ? '60ch' : 'none', marginInline: align === 'center' ? 'auto' : 0, marginBottom: 56}}>
      {eyebrow && <div className="eyebrow">{eyebrow}</div>}
      {title && <h2 className="h1" style={{margin:'18px 0 18px', fontSize:'clamp(36px, 5vw, 64px)'}}>{title}</h2>}
      {body && <p className="lede">{body}</p>}
    </div>
  );
}
window.SectionHeader = SectionHeader;

// ---- Page intro (sub-pages) ----
function PageIntro({ crumbs, eyebrow, title, body, accent, icon }) {
  return (
    <section className="page-intro">
      <AuroraRibbon mode="minimal" />
      <div className="container" style={{position:'relative', zIndex:1}}>
        {crumbs && (
          <div className="crumbs">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span className="sep">/</span>}
                {c.to ? <Link to={c.to}>{c.label}</Link> : <span>{c.label}</span>}
              </React.Fragment>
            ))}
          </div>
        )}
        <div style={{display:'grid', gridTemplateColumns: icon ? 'auto 1fr' : '1fr', gap:32, alignItems:'flex-start'}}>
          {icon && (
            <div className="icon-tile icon-tile--lg" style={{
              background: `color-mix(in srgb, ${accent || 'var(--aurora-blue)'} 16%, transparent)`,
              borderColor: `color-mix(in srgb, ${accent || 'var(--aurora-blue)'} 32%, transparent)`,
              color: accent || 'var(--aurora-blue)',
              width: 88, height: 88, borderRadius: 20,
            }}>
              <Icon name={icon} size={36} />
            </div>
          )}
          <div>
            {eyebrow && <div className="eyebrow" style={{color: accent || 'var(--aurora-blue)'}}>{eyebrow}</div>}
            <h1 className="h1" style={{margin:'18px 0 24px', fontSize:'clamp(40px, 6vw, 80px)', maxWidth: '16ch'}}>{title}</h1>
            {body && <p className="lede">{body}</p>}
          </div>
        </div>
      </div>
    </section>
  );
}
window.PageIntro = PageIntro;

// ---- Metric row ----
function Metrics({ items }) {
  return (
    <div className="metrics">
      {items.map((m, i) => (
        <div className="metric" key={i}>
          <div className="num">{m.num}</div>
          <div className="lbl">{m.lbl}</div>
        </div>
      ))}
    </div>
  );
}
window.Metrics = Metrics;

// ---- Triangle map graphic (dotted, decorative) ----
function TriangleMap() {
  // crude polygon of NC triangle area with dot markers
  const pins = [
    { x: 50, y: 50, label: 'Raleigh', major: true },
    { x: 28, y: 38, label: 'Durham' },
    { x: 16, y: 56, label: 'Chapel Hill' },
    { x: 38, y: 64, label: 'Cary' },
    { x: 32, y: 76, label: 'Apex' },
    { x: 62, y: 28, label: 'Wake Forest' },
    { x: 70, y: 64, label: 'Knightdale' },
    { x: 28, y: 86, label: 'Holly Springs' },
    { x: 76, y: 40, label: 'Rolesville' },
    { x: 86, y: 70, label: 'Garner' },
  ];
  // build a sparse dot grid
  const dots = [];
  for (let y = 4; y < 100; y += 6) {
    for (let x = 4; x < 100; x += 6) {
      dots.push([x, y]);
    }
  }
  return (
    <div className="dotted-map">
      <svg viewBox="0 0 100 60" preserveAspectRatio="none" width="100%" height="100%" style={{position:'absolute', inset:0}}>
        <defs>
          <radialGradient id="map-wash" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#4A8FE7" stopOpacity="0.15" />
            <stop offset="100%" stopColor="#4A8FE7" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="100" height="60" fill="url(#map-wash)" />
        {dots.map(([x, y], i) => (
          <circle
            key={i}
            cx={x} cy={y * 0.6} r="0.3"
            fill="rgba(168,176,196,0.45)"
          />
        ))}
        {/* I-440 beltline-ish loop, decorative */}
        <path d="M 30 25 Q 50 15 65 28 Q 75 40 60 48 Q 40 52 28 42 Q 22 32 30 25 Z"
          stroke="rgba(74,143,231,0.4)" strokeWidth="0.4" fill="none" strokeDasharray="1 1" />
      </svg>
      <div style={{position:'absolute', inset:0}}>
        {pins.map((p, i) => (
          <div key={i} style={{
            position:'absolute',
            left: p.x + '%', top: p.y + '%',
            transform: 'translate(-50%, -50%)',
            display:'flex', alignItems:'center', gap: 6,
          }}>
            <div style={{
              width: p.major ? 14 : 8, height: p.major ? 14 : 8,
              borderRadius: '50%',
              background: p.major ? 'var(--aurora-ribbon)' : 'rgba(74,143,231,0.6)',
              boxShadow: p.major ? '0 0 16px rgba(74,143,231,0.6)' : 'none',
              border: p.major ? '2px solid rgba(245,239,227,0.4)' : 'none',
            }} />
            <span className="mono" style={{fontSize: 10, color: p.major ? 'var(--fg-1)' : 'var(--fg-3)', whiteSpace:'nowrap', letterSpacing:'0.04em'}}>
              {p.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}
window.TriangleMap = TriangleMap;

// ---- Testimonial placeholder card ----
function Testimonial({ quote, name, role, initials, isPlaceholder }) {
  return (
    <div className="testimonial">
      {isPlaceholder && <span className="placeholder-label">Placeholder · Real quotes coming</span>}
      <Icon name="star" size={20} style={{color:'var(--aurora-amber)'}} />
      <p className="quote">"{quote}"</p>
      <div className="who">
        <div className="avatar">{initials}</div>
        <div className="meta">
          <div className="name">{name}</div>
          <div className="role">{role}</div>
        </div>
      </div>
    </div>
  );
}
window.Testimonial = Testimonial;

// ---- Case card ----
// Pass href to make the card an external link to the live work.
function CaseCard({ tag, accent, title, desc, visual, href }) {
  const inner = (
    <>
      <div className="case-img">
        {visual}
        <div className="grid-overlay" />
        {tag && (
          <div style={{position:'absolute', top: 16, left: 16}}>
            <span className="chip" style={{background: `color-mix(in srgb, ${accent} 16%, var(--bg-elev-2))`, color: accent, borderColor:'transparent'}}>{tag}</span>
          </div>
        )}
      </div>
      <div className="case-meta">
        <h4>{title}</h4>
        <p className="desc">{desc}</p>
        {href && (
          <span className="quote-link" style={{marginTop: 10, display:'inline-flex', alignItems:'center', gap: 6}}>
            {href.replace(/^https?:\/\//, '')} <Icon name="arrow-up-right" size={14} />
          </span>
        )}
      </div>
    </>
  );
  if (href) {
    return <a className="case-card" href={href} target="_blank" rel="noopener">{inner}</a>;
  }
  return <div className="case-card">{inner}</div>;
}
window.CaseCard = CaseCard;