index.html

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --surface-1: var(--color-background-primary, #0b1220);
  --surface-2: var(--color-background-secondary, #111a2d);
  --surface-3: var(--color-background-tertiary, #1a2640);
  --text-1: var(--color-text-primary, #f5f7ff);
  --text-2: var(--color-text-secondary, #c8d1e4);
  --text-3: var(--color-text-tertiary, #8fa0bf);
  --border-1: var(--color-border-primary, #3d4f74);
  --border-2: var(--color-border-secondary, #2e3d5c);
  --border-3: var(--color-border-tertiary, #24324d);
  --r-md: var(--border-radius-md, 10px);
  --r-lg: var(--border-radius-lg, 14px);
  --font: var(--font-sans, Inter, Segoe UI, system-ui, sans-serif);
}

body {
  font-family: var(--font);
  color: var(--text-1);
  background:
    radial-gradient(1000px 500px at 10% -20%, #20325d55 0%, transparent 50%),
    radial-gradient(900px 450px at 100% 0%, #2c4a8050 0%, transparent 45%),
    var(--surface-1);
}

.wrap {
  max-width: 940px;
  margin: 20px auto;
  padding: 18px;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff06 0%, #ffffff02 100%), var(--surface-1);
  box-shadow: 0 12px 30px #00000035;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-1);
  color: var(--text-2);
  background: var(--surface-2);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  font-family: var(--font);
}

.pill:hover {
  transform: translateY(-1px);
  border-color: #5672a5;
  color: var(--text-1);
}

.pill.on {
  background: #eaf0ff;
  color: #13223f;
  border-color: #eaf0ff;
}

/* Featured pill – amber/gold style */
.pill-featured {
  border-color: #c9922a;
  color: #f5c96a;
  background: #1e1608;
}
.pill-featured:hover {
  border-color: #f0b429;
  color: #ffe08a;
  background: #2a1f06;
}
.pill-featured.on {
  background: #f5c96a;
  color: #2a1500;
  border-color: #f5c96a;
}

.cnt {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  border: 1px solid var(--border-3);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  background: var(--surface-2);
  position: relative;
}

.card:hover {
  border-color: #536e9f;
  background: #1a2741;
  transform: translateY(-1px);
}

.card.sel {
  border-color: #90b3ff;
  background: #1b2d52;
}

/* Featured card special styling */
.card.featured-card {
  border-color: #6b4c10;
  background: linear-gradient(135deg, #1a1508 0%, #111a2d 60%);
  box-shadow: 0 0 0 1px #4a3408, inset 0 0 30px #f5c96a08;
}

.card.featured-card:hover {
  border-color: #c9922a;
  background: linear-gradient(135deg, #231d07 0%, #1a2741 60%);
  box-shadow: 0 0 12px #f5c96a22, 0 0 0 1px #7a5c14;
  transform: translateY(-2px);
}

.card.featured-card.sel {
  border-color: #f0b429;
  background: linear-gradient(135deg, #2a1f06 0%, #1b2d52 60%);
  box-shadow: 0 0 16px #f5c96a30, 0 0 0 1px #c9922a;
}

/* Featured badge in top-right corner of card */
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5c96a22, #f0b42911);
  border: 1px solid #6b4c10;
  color: #f5c96a;
  flex-shrink: 0;
}

.crow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 7px;
}

.ctitle {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-1);
  line-height: 1.45;
  flex: 1;
}

.brow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

.b {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.chook {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

.det {
  margin-top: 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--surface-2);
}

.dtitle {
  font-size: 16px;
  font-weight: 650;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.4;
}

.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.g3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.db {
  padding: 11px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-3);
  background: #121f37;
}

.dl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.dv {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.parts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.part {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-3);
  color: var(--text-2);
  background: #131f35;
}

.diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.diff-label {
  font-size: 11px;
  color: var(--text-3);
  width: 88px;
  flex-shrink: 0;
  font-weight: 600;
}

.stars {
  display: flex;
  gap: 4px;
}

.star {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}

.star.on { background: #ef9f27; }
.star.off { background: var(--border-3); }

.unique-box {
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: #121f36;
  border: 1px solid var(--border-3);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 12px;
}

.ul2 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-bottom: 4px;
}

.ask-btn {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #6d8ac2;
  background: linear-gradient(180deg, #1f325b 0%, #182947 100%);
  color: #eef4ff;
  cursor: pointer;
  font-family: var(--font);
  transition: transform .15s ease, filter .15s ease;
}

.ask-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.ask-btn:active {
  transform: translateY(0);
}

.hidden { display: none !important; }
.impact-chip { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }

/* ── Component Pricing Table ────────────────────────── */
.price-section {
  margin-top: 14px;
  border: 1px solid #4a3408;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #1a150800 0%, #1a1508 100%);
  overflow: hidden;
}

.price-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #f5c96a18, transparent);
  border-bottom: 1px solid #4a3408;
}

.price-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #f5c96a;
}

.price-updated {
  font-size: 10px;
  color: #8fa0bf;
  margin-left: auto;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
}

.price-table th {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8fa0bf;
  padding: 7px 14px;
  text-align: left;
  border-bottom: 1px solid #2e3d5c;
  background: #0e1924;
}

.price-table td {
  font-size: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #1a2640;
  color: var(--text-2);
  vertical-align: middle;
}

.price-table tr:last-child td {
  border-bottom: none;
}

.price-table tr:hover td {
  background: #1a2640;
}

.price-table .component-name {
  font-weight: 600;
  color: var(--text-1);
  font-size: 12px;
}

.price-table .price-val {
  color: #6fd672;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.price-table .avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.avail-yes {
  background: #0d3018;
  color: #6fd672;
  border: 1px solid #1e5c2a;
}

.avail-local {
  background: #0d1e30;
  color: #7ab4f5;
  border: 1px solid #1e4060;
}

.price-table .source-tag {
  font-size: 10px;
  color: #6b8ab5;
}

.price-total-row td {
  background: #1f1508 !important;
  border-top: 1px solid #4a3408;
  font-weight: 700;
}

.price-total-row .price-val {
  font-size: 14px;
  color: #f5c96a;
}

@media (max-width: 860px) {
  .g3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .wrap {
    margin: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .g2,
  .g3 {
    grid-template-columns: 1fr;
  }

  .crow {
    flex-direction: column;
  }

  .brow {
    width: 100%;
  }

  .ctitle {
    font-size: 14px;
  }

  .price-table th:nth-child(3),
  .price-table td:nth-child(3) {
    display: none;
  }
}
</style>
<div class="wrap">
<div class="top">
  <div class="filters" id="fbar">
    <button class="pill on" data-f="all">All</button>
    <button class="pill pill-featured" data-f="featured">✅ Selected</button>
    <button class="pill" data-f="env">Environment</button>
    <button class="pill" data-f="social">Society</button>
    <button class="pill" data-f="energy">Energy</button>
    <button class="pill" data-f="safety">Safety</button>
  </div>
  <span class="cnt" id="cnt">10 ideas</span>
</div>
<div class="list" id="list"></div>
<div class="det hidden" id="det"></div>
</div>
<script>
const C={
  env:   {bg:"#EAF3DE",color:"#3B6D11",label:"Environment"},
  social:{bg:"#EEEDFE",color:"#3C3489",label:"Society"},
  energy:{bg:"#FAEEDA",color:"#854F0B",label:"Energy"},
  safety:{bg:"#FAECE7",color:"#993C1D",label:"Safety"},
};
const DIFF_LABEL=["","Very easy","Easy","Moderate","Moderate+","Challenging"];

const P=[
  {
    id:1,cat:"env",sdg:"SDG 11",
    title:"Acoustic pothole detector for city roads",
    hook:"Clip a microphone + vibration sensor to a bicycle. A microcontroller runs a simple FFT and flags pothole-like impact signatures. Locations are tagged via a GPS module and plotted on a web map.",
    cs:"FFT signal processing, GPS data parsing, simple web dashboard with map plotting (Leaflet.js)",
    elec:"ADXL345 accelerometer, microphone module, Arduino Uno, NEO-6M GPS, SD card for logging",
    impact:"Helps municipalities find road damage faster — directly improves urban infrastructure",
    unique:"Most road monitoring uses expensive car-mounted sensors or manual surveys. A bicycle-borne embedded system that logs acoustic + vibration signatures is genuinely novel at this level.",
    parts:["Arduino Uno","ADXL345","Mic module","NEO-6M GPS","SD card module","9V battery"],
    diff:3,cost:"₹1,200–1,800"
  },
  {
    id:2,cat:"energy",sdg:"SDG 7",
    featured:true,
    title:"Phantom load killer for household power strips",
    hook:"Most appliances consume power even when off ('phantom load'). A current sensor monitors each socket; a microcontroller cuts power to sockets drawing below a threshold. An LED panel shows live savings.",
    cs:"Current threshold logic, running average filter in code, serial monitor/LCD display of saved watt-hours",
    elec:"ACS712 current sensors, relay modules, Arduino, 16×2 LCD, basic power circuit",
    impact:"Household phantom loads account for 5–10% of home electricity bills. Automatically cutting them saves energy with zero user effort.",
    unique:"Smart plugs exist commercially, but building one from scratch that works across a multi-socket strip with per-socket monitoring is uncommon as a student project.",
    parts:["Arduino Uno","ACS712 ×4","4-channel relay","LCD 16×2","Strip socket board"],
    diff:2,cost:"₹900–1,400",
    priceBreakdown:[
      {component:"Arduino Uno R3",qty:"×1",price:"₹350","avail":"In Stock","source":"Robu.in"},
      {component:"ACS712 Current Sensor (5A)",qty:"×4",price:"₹89 each → ₹356","avail":"In Stock","source":"Robocraze"},
      {component:"4-Channel Relay Module (5V)",qty:"×1",price:"₹180","avail":"In Stock","source":"Robu.in"},
      {component:"16×2 LCD Display",qty:"×1",price:"₹120","avail":"In Stock","source":"Robu.in"},
      {component:"Strip Socket Board",qty:"×1",price:"₹150","avail":"Locally available","source":"Local market"},
      {component:"Misc (wires, resistors, breadboard)",qty:"–",price:"₹80","avail":"In Stock","source":"Any store"},
    ],
    totalCost:"₹1,236"
  },
  {
    id:3,cat:"safety",sdg:"SDG 11",
    title:"Stray animal highway collision alert system",
    hook:"PIR + ultrasonic sensors along a model road section detect animal-sized movement at night. The system flashes high-intensity LEDs and triggers a buzzer to warn approaching 'vehicles' (represented by a moving toy car on a track).",
    cs:"Multi-sensor fusion logic (ignore small animals, flag large ones), state machine in firmware, Bluetooth serial logging",
    elec:"PIR sensor, HC-SR04 ultrasonic, LED array driver, IR proximity sensors, Arduino Nano",
    impact:"Stray animal road accidents kill thousands every year in India. A low-cost embedded alert system on rural highways addresses a very real and ignored problem.",
    unique:"Traffic sensors exist but none specifically fuse PIR + ultrasonic to discriminate animal size and trigger directional road warnings — unusual combination for a mini project.",
    parts:["Arduino Nano","PIR ×2","HC-SR04 ×2","LED strip","Buzzer","12V adapter"],
    diff:2,cost:"₹700–1,100"
  },
  {
    id:4,cat:"env",sdg:"SDG 11",
    title:"Real-time classroom noise pollution logger with heatmap",
    hook:"A sound level sensor logs dB readings every 10 seconds with a timestamp. A Python script on a connected laptop converts the log into a time-of-day heatmap showing the noisiest periods in a classroom or hostel corridor.",
    cs:"Serial data reading in Python, Pandas-based time aggregation, Matplotlib/Seaborn heatmap generation",
    elec:"MAX4466 sound sensor, Arduino Uno, RTC module (DS3231), USB serial connection",
    impact:"Noise pollution data can drive policy — quieter study/sleep environments improve student wellbeing and concentration.",
    unique:"Commercial noise loggers exist but a DIY embedded system that produces a clean time-of-day heatmap from raw sensor data is genuinely novel as a mini project deliverable.",
    parts:["Arduino Uno","MAX4466","DS3231 RTC","USB cable","Laptop for dashboard"],
    diff:2,cost:"₹600–900"
  },
  {
    id:5,cat:"energy",sdg:"SDG 7",
    title:"Smart fan speed controller based on CO₂ concentration",
    hook:"A CO₂ sensor in a classroom detects occupancy level indirectly (more people = more CO₂). The fan speed is automatically set via PWM — high when room is full, off when empty. No manual switches needed.",
    cs:"PWM control algorithm, CO₂ level thresholds, UART sensor interface, optional serial data logging",
    elec:"MH-Z19 CO₂ sensor, N-channel MOSFET, DC fan, Arduino, 5V power supply",
    impact:"Fans left on in empty rooms waste significant electricity in colleges. CO₂-driven automation reduces energy use while keeping occupied rooms comfortable.",
    unique:"PIR-based fan controllers are common. Using CO₂ as the proxy for occupancy density (not just presence/absence) and mapping it to continuous PWM fan speed is a distinct and smarter approach.",
    parts:["Arduino Uno","MH-Z19B CO₂ sensor","IRFZ44N MOSFET","DC fan 12V","OLED display"],
    diff:3,cost:"₹1,000–1,500"
  },
  {
    id:6,cat:"social",sdg:"SDG 9",
    title:"Low-cost braille character display using solenoid actuators",
    hook:"6 solenoids arranged in a 2×3 braille grid are driven by a microcontroller. Type any letter on a serial terminal and the correct braille dot pattern physically pops up. A simple lookup table in firmware does the conversion.",
    cs:"Braille ASCII lookup table, serial input parsing, character-to-bitmask mapping in C/Python",
    elec:"5V push solenoids ×6, ULN2003 driver IC, Arduino, flyback diodes, 3D-printed dot plate",
    impact:"Refreshable braille displays cost ₹50,000+. A DIY proof-of-concept demonstrates the core mechanism at under ₹2,000 — important for accessibility research in India.",
    unique:"Most student assistive tech projects use audio. A physical electromechanical braille cell built from discrete solenoids with a firmware-driven lookup table is rare and impressive.",
    parts:["Arduino Uno","Push solenoids ×6","ULN2003 ×2","Flyback diodes","3D printed plate"],
    diff:3,cost:"₹1,500–2,200"
  },
  {
    id:7,cat:"safety",sdg:"SDG 13",
    featured:true,
    title:"Flood early warning node using water level + LoRa radio",
    hook:"A float sensor and a capacitive water level sensor measure rising water at a river bank model. When a threshold is crossed, an Arduino transmits a wireless alert via LoRa to a receiver node 1–2 km away, which triggers an alarm.",
    cs:"LoRa packet framing, threshold alert state machine, receiver serial decoder, optional web alert via ESP32",
    elec:"HC-SR04 (water level), SX1278 LoRa module, Arduino, LED + buzzer at receiver, 3.7V LiPo",
    impact:"Rural flood warnings save lives. LoRa reaches kilometres with no SIM card or internet — ideal for remote areas with no connectivity.",
    unique:"Most student flood projects use Wi-Fi or GSM which need a network. Using LoRa for off-grid long-range alerting in a first-year project is uncommon and solves a real rural India problem.",
    parts:["Arduino Nano ×2","SX1278 LoRa ×2","HC-SR04","Float sensor","LiPo battery","Buzzer"],
    diff:3,cost:"₹1,200–1,800",
    priceBreakdown:[
      {component:"Arduino Nano V3",qty:"×2",price:"₹220 each → ₹440","avail":"In Stock","source":"Robu.in"},
      {component:"SX1278 LoRa Module (Ra-02, 433 MHz)",qty:"×2",price:"₹260 each → ₹520","avail":"In Stock","source":"Robokits India"},
      {component:"HC-SR04 Ultrasonic Sensor",qty:"×1",price:"₹65","avail":"In Stock","source":"Robocraze"},
      {component:"Float Switch Sensor",qty:"×1",price:"₹100","avail":"In Stock","source":"Robu.in"},
      {component:"3.7V LiPo Battery (1200 mAh)",qty:"×1",price:"₹200","avail":"In Stock","source":"Robu.in"},
      {component:"Buzzer + LED",qty:"–",price:"₹40","avail":"In Stock","source":"Any store"},
      {component:"Misc (wires, logic level shifter, antenna)",qty:"–",price:"₹120","avail":"In Stock","source":"Robu.in"},
    ],
    totalCost:"₹1,485"
  },
  {
    id:8,cat:"env",sdg:"SDG 13",
    featured:true,
    title:"Solar panel health monitor with dust degradation analysis",
    hook:"A light-dependent resistor and a voltage divider measure a small solar panel's open-circuit voltage and short-circuit current. A microcontroller tracks efficiency drop over days. A Python dashboard shows how dust accumulation degrades output.",
    cs:"Efficiency calculation (P=IV), time-series data storage in CSV, line graph plotting in Python/Excel, alert if efficiency drops below threshold",
    elec:"LDR, INA219 power monitor IC, Arduino, RTC, SD card logger, small 5V solar panel",
    impact:"Dirty solar panels lose 20–30% efficiency. A low-cost monitor tells users exactly when cleaning is needed, maximising renewable energy output.",
    unique:"Solar monitoring systems exist at industrial scale. A cheap embedded system that specifically correlates efficiency drop with time-since-cleaning for individual panels is novel at student level.",
    parts:["Arduino Uno","INA219 IC","LDR","DS3231 RTC","SD card","5V solar panel"],
    diff:2,cost:"₹800–1,200",
    priceBreakdown:[
      {component:"Arduino Uno R3",qty:"×1",price:"₹350","avail":"In Stock","source":"Robu.in"},
      {component:"INA219 Power Monitor Module",qty:"×1",price:"₹160","avail":"In Stock","source":"Robu.in"},
      {component:"LDR (Light Dependent Resistor)",qty:"×1",price:"₹15","avail":"In Stock","source":"Local market"},
      {component:"DS3231 RTC Module",qty:"×1",price:"₹149","avail":"In Stock","source":"Robocraze"},
      {component:"MicroSD Card Module",qty:"×1",price:"₹100","avail":"In Stock","source":"Robu.in"},
      {component:"5V Solar Panel (small, 0.5–1W)",qty:"×1",price:"₹280","avail":"In Stock","source":"Robu.in"},
      {component:"Misc (wires, resistors, breadboard)",qty:"–",price:"₹60","avail":"In Stock","source":"Any store"},
    ],
    totalCost:"₹1,114"
  },
  {
    id:9,cat:"social",sdg:"SDG 11",
    title:"Crowd density estimator for public queues using IR beam array",
    hook:"A row of IR TX/RX pairs across a doorway counts people entering and exiting, maintaining a live count. An ESP8266 pushes the count to a simple webpage. When count exceeds a limit, a red LED signals 'queue full'.",
    cs:"Up/down counter logic, debounce algorithm, HTTP server on ESP8266, simple webpage with live number",
    elec:"IR transmitter/receiver pairs ×4, comparator circuit (LM358), ESP8266 NodeMCU, RGB LED, 5V supply",
    impact:"Helps manage crowding at ration shops, hospital queues, canteens — relevant daily infrastructure in Indian cities.",
    unique:"Most crowd counters use cameras + heavy CV models. A pure hardware beam-array approach with a lightweight Wi-Fi dashboard is simpler, cheaper, and privacy-preserving — an underexplored angle.",
    parts:["ESP8266 NodeMCU","IR TX/RX pairs ×4","LM358 IC","RGB LED","5V supply"],
    diff:2,cost:"₹500–900"
  },
  {
    id:10,cat:"energy",sdg:"SDG 7",
    title:"Piezoelectric footstep energy harvester with harvested joule counter",
    hook:"Piezoelectric discs under a floor tile generate micro-voltages when stepped on. A circuit rectifies and stores charge in a supercapacitor. A microcontroller measures voltage, calculates joules harvested per step, and displays a running total on an OLED.",
    cs:"Voltage-to-energy calculation (E=½CV²), cumulative energy tracking, OLED display driver code",
    elec:"Piezo disc buzzers ×8, bridge rectifier, supercapacitor, Arduino Nano, OLED 0.96″, ADS1115 ADC",
    impact:"Demonstrates the concept of recovering wasted footstep energy — educational for sustainable energy awareness and scalable to corridors, stations, and malls.",
    unique:"Piezo energy harvesting is researched at university level but a clean, well-instrumented mini project that quantifies every joule harvested per step with a display is rare in first-year portfolios.",
    parts:["Piezo discs ×8","Bridge rectifier","Supercapacitor","Arduino Nano","OLED","ADS1115"],
    diff:3,cost:"₹700–1,100"
  }
];

let af="all",sid=null;
let scrollToDetailAfterRender=false;

function stars(n,max=5){
  let s="";
  for(let i=1;i<=max;i++) s+=`<div class="star ${i<=n?'on':'off'}"></div>`;
  return s;
}

function render(){
  let filtered;
  if(af==="all") filtered=P;
  else if(af==="featured") filtered=P.filter(p=>p.featured);
  else filtered=P.filter(p=>p.cat===af);

  document.getElementById("cnt").textContent=`${filtered.length} idea${filtered.length!==1?"s":""}`;
  const list=document.getElementById("list");
  list.innerHTML="";
  filtered.forEach(p=>{
    const c=C[p.cat];
    const sc={bg:"#E6F1FB",color:"#185FA5"};
    const card=document.createElement("div");
    card.dataset.id=String(p.id);
    const isFeatured=!!p.featured;
    card.className="card"+(isFeatured?" featured-card":"")+(sid===p.id?" sel":"");
    card.innerHTML=`
      <div class="crow">
        <div class="ctitle">${p.title}</div>
        <div class="brow">
          ${isFeatured?`<span class="featured-badge">✅ Selected</span>`:""}
          <span class="b" style="background:${c.bg};color:${c.color}">${c.label}</span>
          <span class="b" style="background:${sc.bg};color:${sc.color}">${p.sdg}</span>
        </div>
      </div>
      <div class="chook">${p.hook}</div>
    `;
    card.onclick=()=>{
      const opening=sid!==p.id;
      sid=opening?p.id:null;
      scrollToDetailAfterRender=opening;
      render();
    };
    list.appendChild(card);
  });
  renderDet();

  if(scrollToDetailAfterRender && sid){
    scrollToDetailAfterRender=false;
    const det=document.getElementById("det");
    requestAnimationFrame(()=>{
      det.scrollIntoView({behavior:"smooth",block:"start"});
    });
  }
}

function renderPriceTable(p){
  if(!p.priceBreakdown) return "";
  const rows=p.priceBreakdown.map(row=>`
    <tr>
      <td class="component-name">${row.component}</td>
      <td style="color:var(--text-3);font-size:11px">${row.qty}</td>
      <td class="price-val">${row.price}</td>
      <td><span class="avail-chip ${row.avail==="Locally available"?"avail-local":"avail-yes"}">
        ${row.avail==="Locally available"?"📍 Local":"✓ "+row.avail}
      </span></td>
      <td class="source-tag">${row.source}</td>
    </tr>
  `).join("");
  return `
    <div class="price-section">
      <div class="price-section-header">
        <span class="price-section-title">⭐ Real-time Component Prices</span>
        <span class="price-updated">Updated April 2026 · India market</span>
      </div>
      <table class="price-table">
        <thead>
          <tr>
            <th>Component</th>
            <th>Qty</th>
            <th>Price (₹)</th>
            <th>Availability</th>
            <th>Source</th>
          </tr>
        </thead>
        <tbody>
          ${rows}
          <tr class="price-total-row">
            <td class="component-name" colspan="2">Estimated Total</td>
            <td class="price-val">${p.totalCost}</td>
            <td colspan="2" style="font-size:10px;color:#8fa0bf">All components readily available online in India</td>
          </tr>
        </tbody>
      </table>
    </div>
  `;
}

function renderDet(){
  const det=document.getElementById("det");
  if(!sid){det.classList.add("hidden");return}
  const p=P.find(x=>x.id===sid);
  if(!p){det.classList.add("hidden");return}
  det.classList.remove("hidden");
  det.innerHTML=`
    <div class="dtitle">${p.title}${p.featured?` <span class="featured-badge" style="vertical-align:middle">✅ Selected</span>`:`</span>`}</div>
    <div class="g3">
      <div class="db"><div class="dl">CS work involved</div><div class="dv">${p.cs}</div></div>
      <div class="db"><div class="dl">Electronics used</div><div class="dv">${p.elec}</div></div>
      <div class="db"><div class="dl">Real-world impact</div><div class="dv">${p.impact}</div></div>
    </div>
    <div class="unique-box"><div class="ul2">Why it's unique</div>${p.unique}</div>
    <div class="dl" style="margin-bottom:5px">Components needed</div>
    <div class="parts">${p.parts.map(pt=>`<span class="part">${pt}</span>`).join("")}</div>
    <div class="diff-row"><span class="diff-label">Difficulty</span><div class="stars">${stars(p.diff)}</div><span style="font-size:11px;color:var(--color-text-tertiary);margin-left:4px">${DIFF_LABEL[p.diff]}</span></div>
    <div class="diff-row" style="margin-top:-4px"><span class="diff-label">Est. cost</span><span style="font-size:12px;color:var(--color-text-secondary)">${p.cost}</span></div>
    ${renderPriceTable(p)}
  `;
}

document.getElementById("fbar").addEventListener("click",e=>{
  const btn=e.target.closest("[data-f]");
  if(!btn)return;
  af=btn.dataset.f;sid=null;
  document.querySelectorAll("[data-f]").forEach(b=>b.classList.remove("on"));
  btn.classList.add("on");
  render();
});

document.getElementById("det").addEventListener("click",e=>{
  const interactive=e.target.closest("button,a,input,textarea,select,label");
  if(interactive) return;
  if(!sid) return;

  const selectedCard=document.querySelector(`.card[data-id="${sid}"]`);
  if(selectedCard){
    selectedCard.scrollIntoView({behavior:"smooth",block:"center"});
  }
});

render();
</script>